@geotrekce/geotrek-rando-widget 0.0.2 → 0.0.3

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

@@ -7,7 +7,8 @@ import lengthImage from '../../assets/length.svg';
 export class GrwTrekDetail {
   constructor() {
     this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    this.colorPrimaryShade = '#4a0021';
+    this.colorPrimaryTint = '#974c6e';
   }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -27,9 +28,9 @@ export class GrwTrekDetail {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-detail-container" },
+    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] && h("img", { class: "image", src: this.currentTrek.attachments[0].url, loading: "lazy" }),
+      this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: this.currentTrek.attachments[0].thumbnail, loading: "lazy" })),
       h("div", { class: "sub-container" },
         h("div", { class: "icons-labels-container" },
           h("div", { class: "row" },
@@ -52,7 +53,22 @@ export class GrwTrekDetail {
             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 })))));
+      h("div", { class: "downloads-container" },
+        h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"),
+        h("div", { class: "links-container" },
+          h("a", { href: `${this.currentTrek.gpx}` }, "GPX"),
+          h("a", { href: `${this.currentTrek.kml}` }, "KML"),
+          h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))),
+      h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }),
+      state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", { class: "sensitive-areas-container" },
+        h("div", { class: "sensitive-areas-title" }, "Zones sensibles"),
+        state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))),
+      state.currentInformationDesks && state.currentInformationDesks.length > 0 && (h("div", { class: "information-desks-container" },
+        h("div", { class: "information-desks-title" }, "Lieux de renseignement"),
+        state.currentInformationDesks.map(informationDesk => (h("grw-information-desk-detail", { informationDesk: informationDesk }))))),
+      state.currentPois && state.currentPois.length > 0 && (h("div", { class: "pois-container" },
+        h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"),
+        state.currentPois.map(poi => (h("grw-poi-detail", { poi: poi })))))))));
   }
   static get is() { return "grw-trek-detail"; }
   static get encapsulation() { return "shadow"; }
@@ -68,7 +84,7 @@ export class GrwTrekDetail {
       "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; }",
+        "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; }",
         "references": {
           "Trek": {
             "location": "import",
@@ -101,6 +117,24 @@ export class GrwTrekDetail {
       "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,
@@ -117,7 +151,7 @@ export class GrwTrekDetail {
       },
       "attribute": "color-primary-tint",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "defaultValue": "'#974c6e'"
     }
   }; }
   static get states() { return {

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

@@ -1,4 +1,5 @@
 :host {
+  font-family: "Roboto";
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;

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

@@ -4,7 +4,7 @@ export class GrwTreksList {
   constructor() {
     this.treksToDisplay = [];
     this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#d2b2c0';
+    this.colorPrimaryTint = '#974c6e';
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
   }
@@ -70,7 +70,7 @@ export class GrwTreksList {
       },
       "attribute": "color-primary-tint",
       "reflect": false,
-      "defaultValue": "'#d2b2c0'"
+      "defaultValue": "'#974c6e'"
     }
   }; }
   static get states() { return {

package/dist/collection/store/grw-trek-provider.js

@@ -7,16 +7,22 @@ export class GrwTrekProvider {
   componentWillLoad() {
     state.api = this.api;
     return Promise.all([
-      fetch(`${this.api}trek_difficulty/?language=${this.language}`),
-      fetch(`${this.api}trek_route/?language=${this.language}`),
-      fetch(`${this.api}trek_practice/?language=${this.language}`),
-      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry`),
+      fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
+      fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
+      fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
+      fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).catch(() => new Response('[]')),
+      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`),
+      fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`),
+      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry,gpx,kml,pdf,parking_location`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, trek]) => {
+      .then(([difficulties, routes, practices, sensitiveAreas, pois, informationDesks, trek]) => {
       state.difficulties = difficulties.results;
       state.routes = routes.results;
       state.practices = practices.results;
+      state.currentSensitiveAreas = sensitiveAreas.results;
+      state.currentPois = pois.results;
+      state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;
     });
   }

package/dist/collection/store/grw-treks-provider.js

@@ -17,9 +17,9 @@ export class GrwTreksProvider {
     this.practices && (treksRequest += `&practices=${this.practices}`);
     treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,route,departure_geom&page_size=999`;
     return Promise.all([
-      fetch(`${this.api}trek_difficulty/?language=${this.language}`),
-      fetch(`${this.api}trek_route/?language=${this.language}`),
-      fetch(`${this.api}trek_practice/?language=${this.language}`),
+      fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
+      fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
+      fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
       fetch(treksRequest),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))

package/dist/collection/store/store.js

@@ -5,7 +5,10 @@ const { state, onChange } = createStore({
   difficulties: [],
   routes: [],
   practices: [],
+  currentSensitiveAreas: null,
+  currentPois: null,
   currentTrek: null,
+  currentInformationDesks: null,
 });
 export { onChange };
 export default state;

package/dist/collection/stories/App.js

@@ -1,5 +1,6 @@
 export const createApp = ({
   api,
+  language,
   inBbox,
   cities,
   districts,
@@ -12,13 +13,17 @@ export const createApp = ({
   urlLayer,
   attribution,
   colorPrimary,
+  colorPrimaryShade,
   colorPrimaryTint,
-  trekLineColor,
-  departureIconColor,
-  arrivalIconColor,
+  colorTrekLine,
+  colorDepartureIcon,
+  colorArrivalIcon,
+  colorSensitiveArea,
+  colorPoiIcon,
 }) => {
   const app = document.createElement('grw-app');
   app.setAttribute('api', api);
+  app.setAttribute('language', language);
   app.setAttribute('in-bbox', inBbox);
   app.setAttribute('cities', cities);
   app.setAttribute('districts', districts);
@@ -31,9 +36,12 @@ export const createApp = ({
   app.setAttribute('url-layer', urlLayer);
   app.setAttribute('attribution', attribution);
   app.setAttribute('color-primary', colorPrimary);
+  app.setAttribute('color-primary-shade', colorPrimaryShade);
   app.setAttribute('color-primary-tint', colorPrimaryTint);
-  app.setAttribute('trek-line-color', trekLineColor);
-  app.setAttribute('departure-icon-color', departureIconColor);
-  app.setAttribute('arrival-icon-color', arrivalIconColor);
+  app.setAttribute('color-trek-line', colorTrekLine);
+  app.setAttribute('color-departure-icon', colorDepartureIcon);
+  app.setAttribute('color-arrival-icon', colorArrivalIcon);
+  app.setAttribute('color-sensitive-area', colorSensitiveArea);
+  app.setAttribute('color-poi-icon', colorPoiIcon);
   return app;
 };

package/dist/collection/stories/App.stories.js

@@ -13,14 +13,15 @@ export default {
   },
 };
 
-const Template = ({ label, ...args }) => {
-  return createApp({ label, ...args });
+const Template = ({ ...args }) => {
+  return createApp({ ...args });
 };
 
 export const App = Template.bind({});
 
 App.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
   inBbox: '',
   cities: '',
   districts: '',
@@ -33,9 +34,12 @@ App.args = {
   urlLayer: 'openstreetmap',
   attribution: '© OpenStreetMap',
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
-  trekLineColor: '#6b0030',
-  departureIconColor: '#006b3b',
-  arrivalIconColor: '#85003b',
+  colorPrimaryShade: '4a0021',
+  colorPrimaryTint: '#974c6e',
+  colorTrekLine: '#6b0030',
+  colorDepartureIcon: '#006b3b',
+  colorArrivalIcon: '#85003b',
+  colorSensitiveArea: '#4974a5',
+  colorPoiIcon: '#974c6e',
 };
 App.storyName = 'App';

package/dist/collection/stories/TrekCard.js

@@ -1,7 +1,8 @@
-export const createTrekCard = ({ api, trekId, colorPrimary, colorPrimaryTint }) => {
+export const createTrekCard = ({ api, language, trekId, colorPrimary, colorPrimaryTint }) => {
   const container = document.createElement('div');
   const trek = document.createElement('grw-trek-provider');
   trek.setAttribute('api', api);
+  trek.setAttribute('language', language);
   trek.setAttribute('trek-id', trekId);
   container.appendChild(trek);
   const card = document.createElement('grw-trek-card');

package/dist/collection/stories/TrekCard.stories.js

@@ -5,16 +5,17 @@ export default {
   argTypes: {},
 };
 
-const Template = ({ label, ...args }) => {
-  return createTrekCard({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTrekCard({ ...args });
 };
 
 export const TrekCard = Template.bind({});
 
 TrekCard.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
   trekId: 242872,
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryTint: '#974c6e',
 };
 TrekCard.storyName = 'Trek card';

package/dist/collection/stories/TrekDetail.js

@@ -1,11 +1,13 @@
-export const createTrekDetail = ({ api, trekId, colorPrimary, colorPrimaryTint }) => {
+export const createTrekDetail = ({ api, language, trekId, colorPrimary, colorPrimaryShade, colorPrimaryTint }) => {
   const container = document.createElement('div');
   const trek = document.createElement('grw-trek-provider');
   trek.setAttribute('api', api);
+  trek.setAttribute('language', language);
   trek.setAttribute('trek-id', trekId);
   container.appendChild(trek);
   const detail = document.createElement('grw-trek-detail');
   detail.setAttribute('color-primary', colorPrimary);
+  detail.setAttribute('color-primary-shade', colorPrimaryShade);
   detail.setAttribute('color-primary-tint', colorPrimaryTint);
   container.appendChild(detail);
   return container;

package/dist/collection/stories/TrekDetail.stories.js

@@ -5,16 +5,18 @@ export default {
   argTypes: {},
 };
 
-const Template = ({ label, ...args }) => {
-  return createTrekDetail({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTrekDetail({ ...args });
 };
 
 export const TrekDetail = Template.bind({});
 
 TrekDetail.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
   trekId: 242872,
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryShade: '4a0021',
+  colorPrimaryTint: '#974c6e',
 };
 TrekDetail.storyName = 'Trek detail';

package/dist/collection/stories/TrekMap.js

@@ -1,4 +1,4 @@
-export const createTrekMap = ({ api, trekId, urlLayer, center, zoom, attribution, trekLineColor, departureIconColor, arrivalIconColor }) => {
+export const createTrekMap = ({ api, trekId, urlLayer, center, zoom, attribution, colorTrekLine, colorDepartureIcon, colorArrivalIcon, colorSensitiveArea, colorPoiIcon }) => {
   const container = document.createElement('div');
   container.style = 'height: 100%';
   const trek = document.createElement('grw-trek-provider');
@@ -10,9 +10,11 @@ export const createTrekMap = ({ api, trekId, urlLayer, center, zoom, attribution
   trekMap.setAttribute('center', center);
   trekMap.setAttribute('zoom', zoom);
   trekMap.setAttribute('attribution', attribution);
-  trekMap.setAttribute('trek-line-color', trekLineColor);
-  trekMap.setAttribute('departure-icon-color', departureIconColor);
-  trekMap.setAttribute('arrival-icon-color', arrivalIconColor);
+  trekMap.setAttribute('color-trek-line', colorTrekLine);
+  trekMap.setAttribute('color-departure-icon', colorDepartureIcon);
+  trekMap.setAttribute('color-arrival-icon', colorArrivalIcon);
+  trekMap.setAttribute('color-sensitive-area', colorSensitiveArea);
+  trekMap.setAttribute('color-poi-icon', colorPoiIcon);
   container.appendChild(trekMap);
   return container;
 };

package/dist/collection/stories/TrekMap.stories.js

@@ -13,8 +13,8 @@ export default {
   },
 };
 
-const Template = ({ label, ...args }) => {
-  return createTrekMap({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTrekMap({ ...args });
 };
 
 export const TrekMap = Template.bind({});
@@ -26,8 +26,10 @@ TrekMap.args = {
   center: '46.50761080179829, 5.927117067721017',
   zoom: 8,
   attribution: '© OpenStreetMap',
-  trekLineColor: '#6b0030',
-  departureIconColor: '#006b3b',
-  arrivalIconColor: '#85003b',
+  colorTrekLine: '#6b0030',
+  colorDepartureIcon: '#006b3b',
+  colorArrivalIcon: '#85003b',
+  colorSensitiveArea: '#4974a5',
+  colorPoiIcon: '#974c6e',
 };
 TrekMap.storyName = 'Trek map';

package/dist/collection/stories/TreksList.js

@@ -1,7 +1,8 @@
-export const createTreksList = ({ api, inBbox, cities, districts, structures, themes, portals, routes, practices, colorPrimary, colorPrimaryTint }) => {
+export const createTreksList = ({ api, language, inBbox, cities, districts, structures, themes, portals, routes, practices, colorPrimary, colorPrimaryTint }) => {
   const container = document.createElement('div');
   const treks = document.createElement('grw-treks-provider');
   treks.setAttribute('api', api);
+  treks.setAttribute('language', language);
   treks.setAttribute('in-bbox', inBbox);
   treks.setAttribute('cities', cities);
   treks.setAttribute('districts', districts);

package/dist/collection/stories/TreksList.stories.js

@@ -5,14 +5,15 @@ export default {
   argTypes: {},
 };
 
-const Template = ({ label, ...args }) => {
-  return createTreksList({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTreksList({ ...args });
 };
 
 export const TreksList = Template.bind({});
 
 TreksList.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  language: 'fr',
   inBbox: '',
   cities: '',
   districts: '',
@@ -22,6 +23,6 @@ TreksList.args = {
   routes: '',
   practices: '',
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryTint: '#974c6e',
 };
 TreksList.storyName = 'Treks list';

package/dist/collection/stories/TreksMap.stories.js

@@ -13,8 +13,8 @@ export default {
   },
 };
 
-const Template = ({ label, ...args }) => {
-  return createTreksMap({ label, ...args });
+const Template = ({ ...args }) => {
+  return createTreksMap({ ...args });
 };
 
 export const TreksMap = Template.bind({});
@@ -26,6 +26,6 @@ TreksMap.args = {
   zoom: 8,
   attribution: '© OpenStreetMap',
   colorPrimary: '#6b0030',
-  colorPrimaryTint: '#d2b2c0',
+  colorPrimaryTint: '#974c6e',
 };
 TreksMap.storyName = 'Treks map';

package/dist/collection/utils/utils.js

@@ -12,8 +12,8 @@ export function formatDuration(duration) {
   return formattedDuration;
 }
 export function formatLength(length) {
-  return `${Math.round(length / 1000)} km`;
+  return `${Math.round(length / 1000)}km`;
 }
 export function formatAscent(ascent) {
-  return `${ascent} m`;
+  return `${ascent}m`;
 }

package/dist/components/grw-app.js

@@ -1,6 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as state } from './store.js';
-import { d as defineCustomElement$7 } from './grw-map2.js';
+import { d as defineCustomElement$a } from './grw-information-desk-detail2.js';
+import { d as defineCustomElement$9 } from './grw-map2.js';
+import { d as defineCustomElement$8 } from './grw-poi-detail2.js';
+import { d as defineCustomElement$7 } from './grw-sensitive-area-detail2.js';
 import { d as defineCustomElement$6 } from './grw-trek-card2.js';
 import { d as defineCustomElement$5 } from './grw-trek-detail2.js';
 import { d as defineCustomElement$4 } from './grw-trek-provider2.js';
@@ -9,7 +12,7 @@ import { d as defineCustomElement$2 } from './grw-treks-provider2.js';
 
 const arrowBackImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="244 400 100 256 244 112" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/><line x1="120" y1="256" x2="412" y2="256" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`;
 
-const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh}.header-container,.large-view-header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .title,.large-view-header-container .title{color:#ffffff;margin-left:24px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.loader-container{position:absolute;width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{position:relative;width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
+const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .title,.large-view-header-container .title{color:#ffffff;margin-left:24px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.loader-container{position:absolute;width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{position:relative;width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
 
 const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,12 +22,16 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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) {
@@ -49,7 +56,7 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.showMap = this.isLargeView;
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("grw-treks-provider", { api: this.api, "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("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-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("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')))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }), this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -58,6 +65,7 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return grwAppCss; }
 }, [1, "grw-app", {
     "api": [1],
+    "language": [1],
     "inBbox": [1, "in-bbox"],
     "cities": [1],
     "districts": [1],
@@ -72,10 +80,13 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "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],
@@ -85,14 +96,29 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["grw-app", "grw-map", "grw-trek-card", "grw-trek-detail", "grw-trek-provider", "grw-treks-list", "grw-treks-provider"];
+  const components = ["grw-app", "grw-information-desk-detail", "grw-map", "grw-poi-detail", "grw-sensitive-area-detail", "grw-trek-card", "grw-trek-detail", "grw-trek-provider", "grw-treks-list", "grw-treks-provider"];
   components.forEach(tagName => { switch (tagName) {
     case "grw-app":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GrwApp$1);
       }
       break;
+    case "grw-information-desk-detail":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
     case "grw-map":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "grw-poi-detail":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "grw-sensitive-area-detail":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }

package/dist/components/grw-information-desk-detail.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GrwInformationDeskDetail extends Components.GrwInformationDeskDetail, HTMLElement {}
+export const GrwInformationDeskDetail: {
+  prototype: GrwInformationDeskDetail;
+  new (): GrwInformationDeskDetail;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { G as GrwInformationDeskDetail$1, d as defineCustomElement$1 } from './grw-information-desk-detail2.js';
+
+const GrwInformationDeskDetail = GrwInformationDeskDetail$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GrwInformationDeskDetail, defineCustomElement };

package/dist/components/grw-information-desk-detail2.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const grwInformationDeskDetailCss = ":host{display:flex;flex-direction:column;padding:0px 8px 8px 8px}.information-desk-img{width:180px}.information-desk-img img{width:180px;border-radius:8px}.information-desk-right-container{display:flex;flex-direction:column;padding:8px}.information-desk-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:0px 0px 8px 0px}.information-desk-description{font-size:16px}";
+
+const GrwInformationDeskDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  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 style() { return grwInformationDeskDetailCss; }
+}, [1, "grw-information-desk-detail", {
+    "informationDesk": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["grw-information-desk-detail"];
+  components.forEach(tagName => { switch (tagName) {
+    case "grw-information-desk-detail":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GrwInformationDeskDetail);
+      }
+      break;
+  } });
+}
+
+export { GrwInformationDeskDetail as G, defineCustomElement as d };