@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.2

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

@@ -1,20 +1,23 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 import state from 'store/store';
 export class GrwTrekProvider {
+  constructor() {
+    this.language = 'fr';
+  }
   componentWillLoad() {
     state.api = this.api;
     return Promise.all([
-      fetch(`${this.api}trek/${this.trekId}/?language=fr&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry`),
-      fetch(`${this.api}trek_difficulty/?language=fr`),
-      fetch(`${this.api}trek_route/?language=fr`),
-      fetch(`${this.api}trek_practice/?language=fr`),
+      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`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([trek, difficulties, routes, practices]) => {
-      state.currentTrek = trek;
+      .then(([difficulties, routes, practices, trek]) => {
       state.difficulties = difficulties.results;
       state.routes = routes.results;
       state.practices = practices.results;
+      state.currentTrek = trek;
     });
   }
   disconnectedCallback() {
@@ -24,7 +27,26 @@ export class GrwTrekProvider {
     return h(Host, null);
   }
   static get is() { return "grw-trek-provider"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'fr'"
+    },
     "api": {
       "type": "string",
       "mutable": false,

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

@@ -1,32 +1,59 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 import state from 'store/store';
 export class GrwTreksProvider {
+  constructor() {
+    this.language = 'fr';
+  }
   componentWillLoad() {
     state.api = this.api;
-    let treksRequest = `${this.api}trek/?language=fr`;
-    if (this.portals) {
-      treksRequest += `&portals=${this.portals}`;
-    }
+    let treksRequest = `${this.api}trek/?language=${this.language}`;
+    this.inBbox && (treksRequest += `&in_bbox=${this.inBbox}`);
+    this.cities && (treksRequest += `&cities=${this.cities}`);
+    this.districts && (treksRequest += `&districts=${this.districts}`);
+    this.structures && (treksRequest += `&structures=${this.structures}`);
+    this.themes && (treksRequest += `&themes=${this.themes}`);
+    this.portals && (treksRequest += `&portals=${this.portals}`);
+    this.routes && (treksRequest += `&routes=${this.routes}`);
+    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(treksRequest),
-      fetch(`${this.api}trek_difficulty/?language=fr`),
-      fetch(`${this.api}trek_route/?language=fr`),
-      fetch(`${this.api}trek_practice/?language=fr`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([treks, difficulties, routes, practices]) => {
-      state.treks = treks.results;
+      .then(([difficulties, routes, practices, treks]) => {
       state.difficulties = difficulties.results;
       state.routes = routes.results;
       state.practices = practices.results;
+      state.treks = treks.results;
     });
   }
   render() {
     return h(Host, null);
   }
   static get is() { return "grw-treks-provider"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'fr'"
+    },
     "api": {
       "type": "string",
       "mutable": false,
@@ -44,6 +71,91 @@ export class GrwTreksProvider {
       "attribute": "api",
       "reflect": false
     },
+    "inBbox": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "in-bbox",
+      "reflect": false
+    },
+    "cities": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cities",
+      "reflect": false
+    },
+    "districts": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "districts",
+      "reflect": false
+    },
+    "structures": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "structures",
+      "reflect": false
+    },
+    "themes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "themes",
+      "reflect": false
+    },
     "portals": {
       "type": "string",
       "mutable": false,
@@ -60,6 +172,40 @@ export class GrwTreksProvider {
       },
       "attribute": "portals",
       "reflect": false
+    },
+    "routes": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "routes",
+      "reflect": false
+    },
+    "practices": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "practices",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/stories/App.js

@@ -1,9 +1,39 @@
-export const createApp = ({ api, portals, appName, colorPrimary, colorPrimaryTint }) => {
+export const createApp = ({
+  api,
+  inBbox,
+  cities,
+  districts,
+  structures,
+  themes,
+  portals,
+  routes,
+  practices,
+  appName,
+  urlLayer,
+  attribution,
+  colorPrimary,
+  colorPrimaryTint,
+  trekLineColor,
+  departureIconColor,
+  arrivalIconColor,
+}) => {
   const app = document.createElement('grw-app');
   app.setAttribute('api', api);
+  app.setAttribute('in-bbox', inBbox);
+  app.setAttribute('cities', cities);
+  app.setAttribute('districts', districts);
+  app.setAttribute('structures', structures);
+  app.setAttribute('themes', themes);
   app.setAttribute('portals', portals);
+  app.setAttribute('routes', routes);
+  app.setAttribute('practices', practices);
   app.setAttribute('app-name', appName);
+  app.setAttribute('url-layer', urlLayer);
+  app.setAttribute('attribution', attribution);
   app.setAttribute('color-primary', colorPrimary);
   app.setAttribute('color-primary-tint', colorPrimaryTint);
+  app.setAttribute('trek-line-color', trekLineColor);
+  app.setAttribute('departure-icon-color', departureIconColor);
+  app.setAttribute('arrival-icon-color', arrivalIconColor);
   return app;
 };

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

@@ -2,7 +2,15 @@ import { createApp } from './App';
 
 export default {
   title: 'Geotrek Rando Widget',
-  argTypes: {},
+  argTypes: {
+    urlLayer: {
+      control: 'select',
+      options: ['openstreetmap'],
+      mapping: {
+        openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      },
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
@@ -13,9 +21,21 @@ export const App = Template.bind({});
 
 App.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  inBbox: '',
+  cities: '',
+  districts: '',
+  structures: '',
+  themes: '',
   portals: '',
+  routes: '',
+  practices: '',
   appName: 'Geotrek Rando Widget',
+  urlLayer: 'openstreetmap',
+  attribution: '© OpenStreetMap',
   colorPrimary: '#6b0030',
   colorPrimaryTint: '#d2b2c0',
+  trekLineColor: '#6b0030',
+  departureIconColor: '#006b3b',
+  arrivalIconColor: '#85003b',
 };
 App.storyName = 'App';

package/dist/collection/stories/TrekCard.js

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

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

@@ -14,5 +14,7 @@ export const TrekCard = Template.bind({});
 TrekCard.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
   trekId: 242872,
+  colorPrimary: '#6b0030',
+  colorPrimaryTint: '#d2b2c0',
 };
 TrekCard.storyName = 'Trek card';

package/dist/collection/stories/TrekDetail.js

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

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

@@ -14,5 +14,7 @@ export const TrekDetail = Template.bind({});
 TrekDetail.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
   trekId: 242872,
+  colorPrimary: '#6b0030',
+  colorPrimaryTint: '#d2b2c0',
 };
 TrekDetail.storyName = 'Trek detail';

package/dist/collection/stories/TrekMap.js

@@ -1,11 +1,18 @@
-export const createTrekMap = ({ api, trekId, trekLineColor, departureIconColor, arrivalIconColor }) => {
+export const createTrekMap = ({ api, trekId, urlLayer, center, zoom, attribution, trekLineColor, departureIconColor, arrivalIconColor }) => {
+  const container = document.createElement('div');
+  container.style = 'height: 100%';
   const trek = document.createElement('grw-trek-provider');
   trek.setAttribute('api', api);
   trek.setAttribute('trek-id', trekId);
+  container.appendChild(trek);
   const trekMap = document.createElement('grw-map');
+  trekMap.setAttribute('url-layer', urlLayer);
+  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);
-  trek.appendChild(trekMap);
-  return trek;
+  container.appendChild(trekMap);
+  return container;
 };

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

@@ -2,7 +2,15 @@ import { createTrekMap } from './TrekMap';
 
 export default {
   title: 'Geotrek Rando Widget',
-  argTypes: {},
+  argTypes: {
+    urlLayer: {
+      control: 'select',
+      options: ['openstreetmap'],
+      mapping: {
+        openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      },
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
@@ -14,6 +22,10 @@ export const TrekMap = Template.bind({});
 TrekMap.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
   trekId: 242872,
+  urlLayer: 'openstreetmap',
+  center: '46.50761080179829, 5.927117067721017',
+  zoom: 8,
+  attribution: '© OpenStreetMap',
   trekLineColor: '#6b0030',
   departureIconColor: '#006b3b',
   arrivalIconColor: '#85003b',

package/dist/collection/stories/TreksList.js

@@ -1,6 +1,19 @@
-export const createTreksList = ({ api }) => {
+export const createTreksList = ({ api, 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.appendChild(document.createElement('grw-treks-list'));
-  return treks;
+  treks.setAttribute('in-bbox', inBbox);
+  treks.setAttribute('cities', cities);
+  treks.setAttribute('districts', districts);
+  treks.setAttribute('structures', structures);
+  treks.setAttribute('themes', themes);
+  treks.setAttribute('portals', portals);
+  treks.setAttribute('routes', routes);
+  treks.setAttribute('practices', practices);
+  container.appendChild(treks);
+  const list = document.createElement('grw-treks-list');
+  list.setAttribute('color-primary', colorPrimary);
+  list.setAttribute('color-primary-tint', colorPrimaryTint);
+  container.appendChild(list);
+  return container;
 };

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

@@ -13,5 +13,15 @@ export const TreksList = Template.bind({});
 
 TreksList.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  inBbox: '',
+  cities: '',
+  districts: '',
+  structures: '',
+  themes: '',
+  portals: '',
+  routes: '',
+  practices: '',
+  colorPrimary: '#6b0030',
+  colorPrimaryTint: '#d2b2c0',
 };
 TreksList.storyName = 'Treks list';

package/dist/collection/stories/TreksMap.js

@@ -1,7 +1,16 @@
-export const createTreksMap = ({ api }) => {
+export const createTreksMap = ({ api, urlLayer, center, zoom, attribution, colorPrimary, colorPrimaryTint }) => {
+  const container = document.createElement('div');
+  container.style = 'height: 100%';
   const treks = document.createElement('grw-treks-provider');
   treks.setAttribute('api', api);
+  container.appendChild(treks);
   const treksMap = document.createElement('grw-map');
-  treks.appendChild(treksMap);
-  return treks;
+  treksMap.setAttribute('url-layer', urlLayer);
+  treksMap.setAttribute('center', center);
+  treksMap.setAttribute('zoom', zoom);
+  treksMap.setAttribute('attribution', attribution);
+  treksMap.setAttribute('color-primary', colorPrimary);
+  treksMap.setAttribute('color-primary-tint', colorPrimaryTint);
+  container.appendChild(treksMap);
+  return container;
 };

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

@@ -2,7 +2,15 @@ import { createTreksMap } from './TreksMap';
 
 export default {
   title: 'Geotrek Rando Widget',
-  argTypes: {},
+  argTypes: {
+    urlLayer: {
+      control: 'select',
+      options: ['openstreetmap'],
+      mapping: {
+        openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      },
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
@@ -13,5 +21,11 @@ export const TreksMap = Template.bind({});
 
 TreksMap.args = {
   api: 'https://randoadmin.parc-haut-jura.fr/api/v2/',
+  urlLayer: 'openstreetmap',
+  center: '46.50761080179829, 5.927117067721017',
+  zoom: 8,
+  attribution: '© OpenStreetMap',
+  colorPrimary: '#6b0030',
+  colorPrimaryTint: '#d2b2c0',
 };
 TreksMap.storyName = 'Treks map';

package/dist/components/grw-app.js

@@ -9,43 +9,76 @@ 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 = ".header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .title{color:#ffffff;font-size:24px;margin-left:24px}.header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.loader-container{position:absolute;display:flex;justify-content:center;align-items:center;width:100vw;height:100%}.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{display:flex;height:calc(100vh - 64px)}.app-treks-list-container,.app-trek-detail-container{width:100vw;height:100%}.app-map-container{position:absolute;width:100vw;height:calc(100vh - 64px)}.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}@media (min-width: 664px){.map-visibility-button{display:none}.header-container .title{font-size:32px}.loader-container{position:relative;width:50vw}.app-treks-list-container,.app-trek-detail-container{width:50vw;height:100%}.app-map-container{position:relative;width:50vw;height:100%}}";
+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 GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.showTrek = false;
+    this.showMap = false;
+    this.isLargeView = false;
     this.appName = 'Geotrek Rando Widget';
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#d2b2c0';
+    this.colorTrekLine = '#6b0030';
+    this.colorDepartureIcon = '#006b3b';
+    this.colorArrivalIcon = '#85003b';
+    this.largeViewSize = 664;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
     this.showTrek = !this.showTrek;
   }
-  onWindowResize(event) {
-    this.showMap = !(event.composedPath()[0].innerWidth < 664);
+  onWindowResize() {
+    this.handleView();
+  }
+  watchPropHandler() {
+    window.dispatchEvent(new window.Event('resize'));
+  }
+  componentDidLoad() {
+    this.handleView();
   }
   onTrekDetailsClose() {
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
-  componentWillLoad() {
-    this.showMap = !(window.innerWidth < 664);
+  handleView() {
+    this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
+    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, portals: this.portals }, h("div", { class: "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: "app-treks-list-container", style: { visibility: this.showTrek ? 'hidden' : 'visible', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", null)), this.showTrek && !state.currentTrek && (h("div", { class: "loader-container" }, h("span", { class: "loader" }))), this.showTrek && this.currentTrekId && (h("grw-trek-provider", { api: state.api, "trek-id": this.currentTrekId }, state.currentTrek && (h("div", { class: "app-trek-detail-container" }, h("grw-trek-detail", null))))), h("div", { class: "app-map-container", style: { visibility: this.showMap ? 'visible' : 'hidden' } }, h("grw-map", null))), h("div", { class: "map-visibility-button" }, 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, "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')))));
   }
+  get element() { return this; }
+  static get watchers() { return {
+    "isLargeView": ["watchPropHandler"]
+  }; }
   static get style() { return grwAppCss; }
 }, [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"]]]);
 function defineCustomElement$1() {