@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.2

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

@@ -1,28 +1,41 @@
-import { Component, Host, h, Element, Prop } from '@stencil/core';
+import { Component, Host, h, Element, Prop, State } from '@stencil/core';
 import L from 'leaflet';
 import state, { onChange } from 'store/store';
 import departureArrivalImage from '../../assets/departure-arrival.svg';
 export class GrwMap {
   constructor() {
+    this.mapIsReady = false;
+    this.center = '1, 1';
+    this.zoom = 10;
     this.colorTrekLine = '#6b0030';
     this.colorDepartureIcon = '#006b3b';
     this.colorArrivalIcon = '#85003b';
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
   }
   componentDidLoad() {
     this.map = L.map(this.element, {
-      center: [1, 1],
-      zoom: 10,
+      center: this.center.split(',').map(Number),
+      zoom: this.zoom,
     });
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    L.tileLayer(this.urlLayer, {
       maxZoom: 19,
-      attribution: '© OpenStreetMap',
+      attribution: this.attribution,
     }).addTo(this.map);
     if (state.currentTrek) {
       this.addTrek();
     }
-    else {
+    else if (state.currentTrek) {
       this.addTreks();
     }
+    onChange('treks', () => {
+      if (state.currentTrek) {
+        this.addTrek();
+      }
+      else if (state.treks) {
+        this.addTreks();
+      }
+    });
     onChange('currentTrek', () => {
       if (state.currentTrek) {
         this.removeTreks();
@@ -35,6 +48,7 @@ export class GrwMap {
     });
   }
   addTreks() {
+    var _a;
     const treksDepartureCoordinates = [];
     const treksFeatureCollection = {
       type: 'FeatureCollection',
@@ -44,28 +58,32 @@ export class GrwMap {
       treksDepartureCoordinates.push(trek.departure_geom);
       treksFeatureCollection.features.push({
         type: 'Feature',
-        properties: {},
+        properties: { practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram },
         geometry: { type: 'Point', coordinates: trek.departure_geom },
       });
     }
     if (treksDepartureCoordinates.length > 0) {
       const bounds = L.latLngBounds(treksDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-      this.map.fitBounds(bounds);
+      this.currentBounds = bounds;
+      this.map.fitBounds(this.currentBounds);
     }
     this.treksLayer = L.geoJSON(treksFeatureCollection, {
-      pointToLayer: (_geoJsonPoint, latlng) => L.marker(latlng, {
+      pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
         icon: L.divIcon({
           className: 'trek-marker',
           iconSize: 48,
-          iconAnchor: [0, 48],
+          html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : '',
         }),
         autoPanOnFocus: false,
       }),
     }).addTo(this.map);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTreks() {
-    this.map.removeLayer(this.treksLayer);
-    this.treksLayer = null;
+    if (this.treksLayer) {
+      this.map.removeLayer(this.treksLayer);
+      this.treksLayer = null;
+    }
   }
   addTrek() {
     const trekFeature = {
@@ -79,7 +97,8 @@ export class GrwMap {
       }),
     }).addTo(this.map);
     const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-    this.map.fitBounds(bounds);
+    this.currentBounds = bounds;
+    this.map.fitBounds(this.currentBounds);
     const departureCoordinates = [state.currentTrek.geometry.coordinates.at(0)[0], state.currentTrek.geometry.coordinates.at(0)[1]];
     const arrivalCoordinates = [state.currentTrek.geometry.coordinates.at(-1)[0], state.currentTrek.geometry.coordinates.at(-1)[1]];
     const departureArrivalFeatureCollection = {
@@ -110,15 +129,26 @@ export class GrwMap {
         autoPanOnFocus: false,
       }),
     }).addTo(this.map);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTrek() {
-    this.map.removeLayer(this.trekLayer);
-    this.map.removeLayer(this.departureArrivalLayer);
-    this.trekLayer = null;
-    this.departureArrivalLayer = null;
+    if (this.trekLayer) {
+      this.map.removeLayer(this.trekLayer);
+      this.trekLayer = null;
+    }
+    if (this.departureArrivalLayer) {
+      this.map.removeLayer(this.departureArrivalLayer);
+      this.departureArrivalLayer = null;
+    }
   }
   render() {
-    return h(Host, { style: { '--color-departure-icon': this.colorDepartureIcon, '--color-arrival-icon': this.colorArrivalIcon } });
+    return (h(Host, { style: {
+        '--color-primary': this.colorPrimary,
+        '--color-primary-tint': this.colorPrimaryTint,
+        '--color-departure-icon': this.colorDepartureIcon,
+        '--color-arrival-icon': this.colorArrivalIcon,
+      } }, !this.mapIsReady && (h("div", { class: "map-loader-container" },
+      h("span", { class: "loader" })))));
   }
   static get is() { return "grw-map"; }
   static get originalStyleUrls() { return {
@@ -128,6 +158,76 @@ export class GrwMap {
     "$": ["grw-map.css"]
   }; }
   static get properties() { return {
+    "urlLayer": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url-layer",
+      "reflect": false
+    },
+    "attribution": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "attribution",
+      "reflect": false
+    },
+    "center": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "center",
+      "reflect": false,
+      "defaultValue": "'1, 1'"
+    },
+    "zoom": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "zoom",
+      "reflect": false,
+      "defaultValue": "10"
+    },
     "colorTrekLine": {
       "type": "string",
       "mutable": false,
@@ -181,7 +281,46 @@ export class GrwMap {
       "attribute": "color-arrival-icon",
       "reflect": false,
       "defaultValue": "'#85003b'"
+    },
+    "colorPrimary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorPrimaryTint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-tint",
+      "reflect": false,
+      "defaultValue": "'#d2b2c0'"
     }
   }; }
+  static get states() { return {
+    "mapIsReady": {}
+  }; }
   static get elementRef() { return "element"; }
 }

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

@@ -1,45 +1,58 @@
-import { Component, Host, h, Prop, Event } from '@stencil/core';
-import state from 'store/store';
+import { Component, Host, h, Prop, Event, State } from '@stencil/core';
+import state, { onChange } from 'store/store';
 import { formatDuration, formatLength, formatAscent } from 'utils/utils';
 import ascentImage from '../../assets/ascent.svg';
 import durationImage from '../../assets/duration.svg';
 import lengthImage from '../../assets/length.svg';
 export class GrwTrekCard {
+  constructor() {
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
+  }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.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);
+    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) },
-      h("div", { class: "trek-card-container" },
-        this.currentTrek.attachments[0] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, 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)))))));
+    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].url && (h("img", { class: "image", src: `${this.currentTrek.attachments[0].url}.400x0_q85.${this.currentTrek.attachments[0].url.slice(-3).toLowerCase()}`, 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))))))));
   }
   static get is() { return "grw-trek-card"; }
   static get encapsulation() { return "shadow"; }
@@ -69,8 +82,50 @@ export class GrwTrekCard {
         "tags": [],
         "text": ""
       }
+    },
+    "colorPrimary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorPrimaryTint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-tint",
+      "reflect": false,
+      "defaultValue": "'#d2b2c0'"
     }
   }; }
+  static get states() { return {
+    "currentTrek": {},
+    "difficulty": {},
+    "route": {},
+    "practice": {}
+  }; }
   static get events() { return [{
       "method": "trekCardPress",
       "name": "trekCardPress",

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

@@ -1,7 +1,7 @@
 .trek-detail-container {
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 64px);
+  height: 100%;
   overflow-y: auto;
 }
 .trek-detail-container .name {

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

@@ -1,45 +1,58 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-import state from 'store/store';
+import { Component, Host, h, Prop, State } from '@stencil/core';
+import state, { onChange } from 'store/store';
 import { formatDuration, formatLength, formatAscent } from 'utils/utils';
 import ascentImage from '../../assets/ascent.svg';
 import durationImage from '../../assets/duration.svg';
 import lengthImage from '../../assets/length.svg';
 export class GrwTrekDetail {
+  constructor() {
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
+  }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.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);
+    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;
-    return (h(Host, null,
-      h("div", { class: "trek-detail-container" },
-        h("div", { class: "name" }, this.currentTrek.name),
-        this.currentTrek.attachments[0] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, 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: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--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] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, 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: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser })))));
   }
   static get is() { return "grw-trek-detail"; }
   static get encapsulation() { return "shadow"; }
@@ -69,6 +82,48 @@ export class GrwTrekDetail {
         "tags": [],
         "text": ""
       }
+    },
+    "colorPrimary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorPrimaryTint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-tint",
+      "reflect": false,
+      "defaultValue": "'#d2b2c0'"
     }
   }; }
+  static get states() { return {
+    "currentTrek": {},
+    "difficulty": {},
+    "route": {},
+    "practice": {}
+  }; }
 }

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

@@ -1,20 +1,11 @@
 :host {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  max-height: calc(100vh - 64px);
+  justify-content: space-around;
+  height: 100%;
+  max-height: 100vh;
   overflow-y: auto;
 }
-@media (min-width: 664px) {
-  :host {
-    justify-content: space-between;
-  }
-}
-@media (min-width: 996px) {
-  :host {
-    justify-content: flex-start;
-  }
-}
 
 grw-trek-card {
   margin: 6px;

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

@@ -1,14 +1,18 @@
-import { Component, Host, h, Element, State } from '@stencil/core';
-import state from 'store/store';
+import { Component, Host, h, Element, State, Prop } from '@stencil/core';
+import state, { onChange } from 'store/store';
 export class GrwTreksList {
   constructor() {
     this.treksToDisplay = [];
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
   }
   componentWillLoad() {
-    this.treksToDisplay = state.treks.slice(0, this.step);
     this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+    onChange('treks', () => {
+      this.treksToDisplay = state.treks.slice(0, this.step);
+    });
   }
   handleInfiniteScroll(event) {
     if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
@@ -21,7 +25,7 @@ export class GrwTreksList {
     }
   }
   render() {
-    return (h(Host, { class: "treks-list-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { trek: trek })))));
+    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 })))));
   }
   static get is() { return "grw-treks-list"; }
   static get encapsulation() { return "shadow"; }
@@ -31,6 +35,44 @@ export class GrwTreksList {
   static get styleUrls() { return {
     "$": ["grw-treks-list.css"]
   }; }
+  static get properties() { return {
+    "colorPrimary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary",
+      "reflect": false,
+      "defaultValue": "'#6b0030'"
+    },
+    "colorPrimaryTint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-primary-tint",
+      "reflect": false,
+      "defaultValue": "'#d2b2c0'"
+    }
+  }; }
   static get states() { return {
     "treksToDisplay": {}
   }; }