@geotrekce/geotrek-rando-widget 0.0.13 → 0.0.14

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

@@ -1,5 +1,5 @@
-import { Component, Host, h, Prop, State } from '@stencil/core';
-import state, { onChange } from 'store/store';
+import { Host, h } from '@stencil/core';
+import state, { onChange, reset } from 'store/store';
 import { formatDuration, formatLength, formatAscent } from 'utils/utils';
 import ascentImage from '../../assets/ascent.svg';
 import durationImage from '../../assets/duration.svg';
@@ -9,6 +9,7 @@ export class GrwTrekDetail {
     this.colorPrimary = '#6b0030';
     this.colorPrimaryShade = '#4a0021';
     this.colorPrimaryTint = '#974c6e';
+    this.resetStoreOnDisconnected = true;
   }
   connectedCallback() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -40,221 +41,147 @@ export class GrwTrekDetail {
       }
     });
   }
+  disconnectedCallback() {
+    if (this.resetStoreOnDisconnected) {
+      reset();
+    }
+  }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    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].url && (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: "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.endsWith('.json')
-            ? this.currentTrek.altimetric_profile.replace('.json', '.svg')
-            : `${this.currentTrek.altimetric_profile}?format=svg` }))),
-      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 })))))))))));
+    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].url && (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: "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.endsWith('.json')
+        ? this.currentTrek.altimetric_profile.replace('.json', '.svg')
+        : `${this.currentTrek.altimetric_profile}?format=svg` }))), 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 })))))))))));
   }
   static get is() { return "grw-trek-detail"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["grw-trek-detail.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["grw-trek-detail.css"]
-  }; }
-  static get properties() { return {
-    "trek": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Trek",
-        "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; arrival?: string; altimetric_profile?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; }",
-        "references": {
-          "Trek": {
-            "location": "import",
-            "path": "types/types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-trek-detail.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-trek-detail.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "trek": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Trek",
+          "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; departure_city: string; arrival?: string; altimetric_profile?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; }",
+          "references": {
+            "Trek": {
+              "location": "import",
+              "path": "types/types"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "colorPrimary": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "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'"
       },
-      "attribute": "color-primary",
-      "reflect": false,
-      "defaultValue": "'#6b0030'"
-    },
-    "colorPrimaryShade": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "colorPrimaryShade": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-primary-shade",
+        "reflect": false,
+        "defaultValue": "'#4a0021'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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": "'#974c6e'"
       },
-      "attribute": "color-primary-shade",
-      "reflect": false,
-      "defaultValue": "'#4a0021'"
-    },
-    "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": "'#974c6e'"
-    }
-  }; }
-  static get states() { return {
-    "difficulty": {},
-    "route": {},
-    "practice": {},
-    "themes": {},
-    "labels": {},
-    "sources": {},
-    "accessibilities": {},
-    "accessibilityLevel": {},
-    "currentTrek": {}
-  }; }
+      "resetStoreOnDisconnected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "reset-store-on-disconnected",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "currentTrek": {},
+      "difficulty": {},
+      "route": {},
+      "practice": {},
+      "themes": {},
+      "labels": {},
+      "sources": {},
+      "accessibilities": {},
+      "accessibilityLevel": {}
+    };
+  }
 }

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

@@ -1,11 +1,12 @@
-import { Component, Host, h, Element, State, Prop } from '@stencil/core';
-import state, { onChange } from 'store/store';
+import { Host, h } from '@stencil/core';
+import state, { onChange, reset } from 'store/store';
 export class GrwTreksList {
   constructor() {
     this.treksToDisplay = [];
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#974c6e';
     this.isLargeView = false;
+    this.resetStoreOnDisconnected = true;
     this.step = 10;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.shouldAddInfiniteScrollEvent = true;
@@ -53,77 +54,106 @@ export class GrwTreksList {
     }
   }
   disconnectedCallback() {
+    if (this.resetStoreOnDisconnected) {
+      reset();
+    }
     this.handleInfiniteScrollEvent(false);
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (h("grw-trek-card", { "reset-store-on-disconnected": "false", key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
   }
   static get is() { return "grw-treks-list"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["grw-treks-list.scss"]
-  }; }
-  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": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-treks-list.scss"]
+    };
+  }
+  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'"
       },
-      "attribute": "color-primary-tint",
-      "reflect": false,
-      "defaultValue": "'#974c6e'"
-    },
-    "isLargeView": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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": "'#974c6e'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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"
       },
-      "attribute": "is-large-view",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "treksToDisplay": {}
-  }; }
+      "resetStoreOnDisconnected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "reset-store-on-disconnected",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "treksToDisplay": {}
+    };
+  }
   static get elementRef() { return "element"; }
 }