@geotrekce/geotrek-rando-widget 0.0.2 → 0.0.3

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["grw-app_7.cjs",[[1,"grw-app",{"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"showTrek":[32],"showMap":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"treksToDisplay":[32]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"mapIsReady":[32]}],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}]]]], options);
+  return index.bootstrapLazy([["grw-app_10.cjs",[[1,"grw-app",{"api":[1],"language":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"showTrek":[32],"showMap":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"treksToDisplay":[32]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"mapIsReady":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -1,7 +1,10 @@
 {
   "entries": [
     "./components/grw-app/grw-app.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",
+    "./components/grw-sensitive-area-detail/grw-sensitive-area-detail.js",
     "./components/grw-trek-card/grw-trek-card.js",
     "./components/grw-trek-detail/grw-trek-detail.js",
     "./components/grw-treks-list/grw-treks-list.js",

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

@@ -2,6 +2,7 @@
   position: relative;
   height: 100%;
   max-height: 100vh;
+  font-family: "Roboto";
 }
 
 .header-container,

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

@@ -6,12 +6,16 @@ export class GrwApp {
     this.showTrek = false;
     this.showMap = false;
     this.isLargeView = false;
+    this.language = 'fr';
     this.appName = 'Geotrek Rando Widget';
     this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    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) {
@@ -37,8 +41,8 @@ export class GrwApp {
   }
   render() {
     return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
-      h("grw-treks-provider", { api: this.api, "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, "trek-id": this.currentTrekId }),
+      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" },
@@ -47,8 +51,8 @@ export class GrwApp {
           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-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 })),
+            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')))));
   }
@@ -78,6 +82,24 @@ export class GrwApp {
       "attribute": "api",
       "reflect": false
     },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'fr'"
+    },
     "inBbox": {
       "type": "string",
       "mutable": false,
@@ -318,6 +340,24 @@ export class GrwApp {
       "reflect": false,
       "defaultValue": "'#6b0030'"
     },
+    "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'"
+    },
     "colorPrimaryTint": {
       "type": "string",
       "mutable": false,
@@ -334,7 +374,7 @@ export class GrwApp {
       },
       "attribute": "color-primary-tint",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "defaultValue": "'#974c6e'"
     },
     "colorTrekLine": {
       "type": "string",
@@ -389,6 +429,42 @@ export class GrwApp {
       "attribute": "color-arrival-icon",
       "reflect": false,
       "defaultValue": "'#85003b'"
+    },
+    "colorSensitiveArea": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-sensitive-area",
+      "reflect": false,
+      "defaultValue": "'#4974a5'"
+    },
+    "colorPoiIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-poi-icon",
+      "reflect": false,
+      "defaultValue": "'#974c6e'"
     }
   }; }
   static get states() { return {

package/dist/collection/components/grw-information-desk-detail/grw-information-desk-detail.css

@@ -0,0 +1,30 @@
+: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;
+}

package/dist/collection/components/grw-information-desk-detail/grw-information-desk-detail.js

@@ -0,0 +1,53 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class GrwInformationDeskDetail {
+  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))))));
+  }
+  static get is() { return "grw-information-desk-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-information-desk-detail.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-information-desk-detail.css"]
+  }; }
+  static get properties() { return {
+    "informationDesk": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "InformationDesk",
+        "resolved": "{ id: number; name: string; description: string; type: InformationDeskType; phone: string; email: string; website: string; municipality: string; postal_code: string; street: string; photo_url: string; latitude: string; longitude: string; }",
+        "references": {
+          "InformationDesk": {
+            "location": "import",
+            "path": "types/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

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

@@ -657,6 +657,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 
 grw-map {
+  font-family: "Roboto";
   display: block;
   height: 100%;
   max-height: 100vh;
@@ -719,4 +720,84 @@ grw-map {
   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;
 }