@geotrekce/geotrek-rando-widget 0.0.5 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/cjs/geotrek-rando-widget.cjs.js +2 -2
  2. package/dist/cjs/grw-app.cjs.entry.js +38 -11
  3. package/dist/cjs/grw-filter_6.cjs.entry.js +141 -71
  4. package/dist/cjs/grw-information-desk-detail_3.cjs.entry.js +3 -3
  5. package/dist/cjs/grw-trek-card.cjs.entry.js +3 -3
  6. package/dist/cjs/{index-c2c4531d.js → index-4c76daa3.js} +8 -3
  7. package/dist/cjs/loader.cjs.js +2 -2
  8. package/dist/cjs/{store-972b8d2a.js → store-b4c3c507.js} +7 -3
  9. package/dist/collection/components/grw-app/grw-app.css +17 -11
  10. package/dist/collection/components/grw-app/grw-app.js +45 -15
  11. package/dist/collection/components/grw-filter/grw-filter.js +11 -12
  12. package/dist/collection/components/grw-map/grw-map.js +41 -22
  13. package/dist/collection/components/grw-sensitive-area-detail/grw-sensitive-area-detail.css +1 -0
  14. package/dist/collection/components/grw-trek-card/grw-trek-card.js +1 -1
  15. package/dist/collection/components/grw-trek-detail/grw-trek-detail.css +6 -0
  16. package/dist/collection/components/grw-trek-detail/grw-trek-detail.js +21 -5
  17. package/dist/collection/components/grw-treks-list/grw-treks-list.css +0 -12
  18. package/dist/collection/components/grw-treks-list/grw-treks-list.js +21 -9
  19. package/dist/collection/store/grw-trek-provider.js +28 -15
  20. package/dist/collection/store/grw-treks-provider.js +17 -8
  21. package/dist/collection/store/store.js +6 -2
  22. package/dist/components/grw-app.js +38 -11
  23. package/dist/components/grw-filter2.js +11 -12
  24. package/dist/components/grw-map2.js +41 -22
  25. package/dist/components/grw-sensitive-area-detail2.js +1 -1
  26. package/dist/components/grw-trek-card2.js +1 -1
  27. package/dist/components/grw-trek-detail2.js +20 -4
  28. package/dist/components/grw-trek-provider2.js +28 -15
  29. package/dist/components/grw-treks-list2.js +23 -9
  30. package/dist/components/grw-treks-provider2.js +17 -8
  31. package/dist/components/store.js +6 -2
  32. package/dist/esm/geotrek-rando-widget.js +2 -2
  33. package/dist/esm/grw-app.entry.js +38 -11
  34. package/dist/esm/grw-filter_6.entry.js +141 -71
  35. package/dist/esm/grw-information-desk-detail_3.entry.js +3 -3
  36. package/dist/esm/grw-trek-card.entry.js +3 -3
  37. package/dist/esm/{index-192d910f.js → index-ee473772.js} +8 -3
  38. package/dist/esm/loader.js +2 -2
  39. package/dist/esm/{store-5a42b5d8.js → store-a5f523fd.js} +7 -3
  40. package/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js +1 -1
  41. package/dist/geotrek-rando-widget/{p-d3aa9819.entry.js → p-0510e16b.entry.js} +1 -1
  42. package/dist/geotrek-rando-widget/p-22562f4d.js +1 -0
  43. package/dist/geotrek-rando-widget/{p-2d9ae918.entry.js → p-500436f1.entry.js} +1 -1
  44. package/dist/geotrek-rando-widget/p-94f0db4d.entry.js +1 -0
  45. package/dist/geotrek-rando-widget/p-9a25f817.entry.js +1 -0
  46. package/dist/geotrek-rando-widget/p-b62909db.js +2 -0
  47. package/dist/types/components/grw-app/grw-app.d.ts +3 -3
  48. package/dist/types/components/grw-filter/grw-filter.d.ts +1 -1
  49. package/dist/types/components/grw-map/grw-map.d.ts +3 -2
  50. package/dist/types/components/grw-trek-card/grw-trek-card.d.ts +1 -1
  51. package/dist/types/components/grw-trek-detail/grw-trek-detail.d.ts +1 -1
  52. package/dist/types/components/grw-treks-list/grw-treks-list.d.ts +3 -2
  53. package/dist/types/components.d.ts +2 -2
  54. package/dist/types/store/grw-trek-provider.d.ts +4 -1
  55. package/dist/types/store/grw-treks-provider.d.ts +4 -1
  56. package/dist/types/store/store.d.ts +9 -0
  57. package/package.json +1 -1
  58. package/readme.md +4 -0
  59. package/dist/geotrek-rando-widget/p-206a52d9.entry.js +0 -1
  60. package/dist/geotrek-rando-widget/p-6dce5e6c.js +0 -2
  61. package/dist/geotrek-rando-widget/p-8cfa03c0.entry.js +0 -1
  62. package/dist/geotrek-rando-widget/p-e63213a9.js +0 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index-c2c4531d.js');
3
+ const index = require('./index-4c76daa3.js');
4
4
 
5
5
  /*
6
6
  Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- return index.bootstrapLazy([["grw-trek-card.cjs",[[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32],"themes":[32]}]]],["grw-information-desk-detail_3.cjs",[[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}]]],["grw-filter_6.cjs",[[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"difficulty":[32],"route":[32],"practice":[32],"themes":[32],"labels":[32],"sources":[32],"accessibilities":[32],"accessibilityLevel":[32],"currentTrek":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"treksToDisplay":[32]}],[1,"grw-filter",{"filterType":[1,"filter-type"],"filterName":[1,"filter-name"],"filterNameProperty":[1,"filter-name-property"]}],[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]}]]],["grw-app.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],"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],"showTreksMap":[32],"showTrekMap":[32],"showFilters":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]]]]], options);
18
+ return index.bootstrapLazy([["grw-trek-card.cjs",[[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32],"themes":[32]}]]],["grw-information-desk-detail_3.cjs",[[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}]]],["grw-filter_6.cjs",[[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"difficulty":[32],"route":[32],"practice":[32],"themes":[32],"labels":[32],"sources":[32],"accessibilities":[32],"accessibilityLevel":[32],"currentTrek":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"treksToDisplay":[32]}],[1,"grw-filter",{"filterType":[1,"filter-type"],"filterName":[1,"filter-name"],"filterNameProperty":[1,"filter-name-property"]}],[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]}]]],["grw-app.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],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[2],"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],"showTreksMap":[32],"showTrekMap":[32],"showFilters":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]]]]], options);
19
19
  });
@@ -2,12 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-c2c4531d.js');
6
- const store = require('./store-972b8d2a.js');
5
+ const index = require('./index-4c76daa3.js');
6
+ const store = require('./store-b4c3c507.js');
7
7
 
8
8
  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>`;
9
9
 
10
- 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 .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}.header-container .handle-filters-button,.large-view-header-container .handle-filters-button{user-select:none;cursor:pointer;color:var(--color-primary);background-color:#ffffff;margin-left:36px;border-radius:8px;padding:8px}.header-container .attribution-container,.large-view-header-container .attribution-container{position:absolute;right:24px}.header-container .attribution-container a,.large-view-header-container .attribution-container a{color:#ffffff;text-decoration:none}.options-container{height:calc(100% - 64px);position:absolute;width:100%;z-index:1100;top:64px}.filters-container{position:absolute;width:100%;background-color:#ffffff;padding:36px 0px;z-index:1100}.filters-container .close-filters-button{cursor:pointer;font-weight:bold;position:absolute;top:12px;right:12px;padding:12px;border-radius:12px;color:var(--color-primary);border:1px var(--color-primary) solid}.filters-container .close-filters-button:hover{background-color:var(--color-primary);color:#ffffff}.filters-container .filter-margin-top{margin-top:24px}.filters-container .current-treks-length{margin:0px 0px 32px 8px;color:var(--color-primary);font-size:24px;font-weight:bold}.back-filters-container{background-color:rgba(0, 0, 0, 0.5);width:100%;height:calc(100% - 64px);position:absolute;z-index:1099;top:64px}.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%}";
10
+ const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;flex-direction:row;align-items:center;background-color:var(--color-primary);height:64px}.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}.header-container .handle-filters-container,.large-view-header-container .handle-filters-container{display:flex;align-items:center}.header-container .handle-filters-container .handle-filters-button,.large-view-header-container .handle-filters-container .handle-filters-button{user-select:none;cursor:pointer;color:var(--color-primary);background-color:#ffffff;margin-left:12px;border-radius:8px;padding:8px}.header-container .handle-filters-container .current-treks-within-bounds-length,.large-view-header-container .handle-filters-container .current-treks-within-bounds-length{margin-left:12px;color:#ffffff}.header-container .attribution-container,.large-view-header-container .attribution-container{position:absolute;right:24px}.header-container .attribution-container a,.large-view-header-container .attribution-container a{color:#ffffff;text-decoration:none}.options-container{height:calc(100% - 64px);position:absolute;width:100%;z-index:1100;top:64px}.filters-container{position:absolute;width:100%;background-color:#ffffff;padding:36px 0px;z-index:1100}.filters-container .close-filters-button{cursor:pointer;font-weight:bold;position:absolute;top:12px;right:12px;padding:12px;border-radius:12px;color:var(--color-primary);border:1px var(--color-primary) solid}.filters-container .close-filters-button:hover{background-color:var(--color-primary);color:#ffffff}.filters-container .filter-margin-top{margin-top:24px}.back-filters-container{background-color:rgba(0, 0, 0, 0.5);width:100%;height:calc(100% - 64px);position:absolute;z-index:1099;top:64px}.init-loader-container,.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.init-loader-container .loader,.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}.init-loader-container,.loader-container{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{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%}";
11
11
 
12
12
  const GrwApp = class {
13
13
  constructor(hostRef) {
@@ -26,8 +26,8 @@ const GrwApp = class {
26
26
  this.colorArrivalIcon = '#85003b';
27
27
  this.colorSensitiveArea = '#4974a5';
28
28
  this.colorPoiIcon = '#974c6e';
29
- this.handlePopStateBind = this.handlePopState.bind(this);
30
29
  this.largeViewSize = 1024;
30
+ this.handlePopStateBind = this.handlePopState.bind(this);
31
31
  }
32
32
  onTrekCardPress(event) {
33
33
  this.currentTrekId = event.detail;
@@ -43,11 +43,26 @@ const GrwApp = class {
43
43
  window.dispatchEvent(new window.Event('resize'));
44
44
  }
45
45
  componentDidLoad() {
46
+ store.onChange('trekNetworkError', () => {
47
+ if (store.state.trekNetworkError) {
48
+ const urlRedirect = new URL(window.location.toString());
49
+ urlRedirect.searchParams.delete('trek');
50
+ window.history.replaceState({}, '', urlRedirect);
51
+ this.onTrekDetailsClose();
52
+ }
53
+ });
46
54
  this.handleView();
47
55
  window.addEventListener('popstate', this.handlePopStateBind, false);
56
+ const url = new URL(window.location.toString());
57
+ const trekParam = url.searchParams.get('trek');
58
+ if (trekParam) {
59
+ window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);
60
+ this.currentTrekId = Number(trekParam);
61
+ this.showTrek = !this.showTrek;
62
+ }
48
63
  }
49
64
  onTrekDetailsClose() {
50
- this.forwardTrekId = this.currentTrekId;
65
+ store.state.currentTrek = null;
51
66
  this.currentTrekId = null;
52
67
  this.showTrek = !this.showTrek;
53
68
  }
@@ -59,15 +74,27 @@ const GrwApp = class {
59
74
  handleFilters() {
60
75
  this.showFilters = !this.showFilters;
61
76
  }
62
- handlePopState() {
63
- if (this.showTrek) {
77
+ handleBackButton() {
78
+ if (window.history.state.isInitialHistoryWithTrek) {
64
79
  this.onTrekDetailsClose();
80
+ const url = new URL(window.location.toString());
81
+ url.searchParams.delete('trek');
82
+ window.history.pushState({}, '', url);
83
+ }
84
+ else {
85
+ window.history.back();
65
86
  }
66
- else if (this.forwardTrekId) {
67
- this.currentTrekId = this.forwardTrekId;
68
- this.forwardTrekId = null;
87
+ }
88
+ handlePopState() {
89
+ const url = new URL(window.location.toString());
90
+ const trekParam = url.searchParams.get('trek');
91
+ if (trekParam) {
92
+ this.currentTrekId = Number(trekParam);
69
93
  this.showTrek = !this.showTrek;
70
94
  }
95
+ else {
96
+ this.onTrekDetailsClose();
97
+ }
71
98
  }
72
99
  handleShowMap() {
73
100
  if (this.currentTrekId) {
@@ -81,7 +108,7 @@ const GrwApp = class {
81
108
  window.removeEventListener('popstate', this.handlePopStateBind);
82
109
  }
83
110
  render() {
84
- return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, index.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 && index.h("grw-trek-provider", { api: store.state.api, language: this.language, "trek-id": this.currentTrekId }), index.h("div", { class: "app-container" }, index.h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (index.h("div", { onClick: () => window.history.back(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (index.h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")), !this.showTrek && this.showFilters && (index.h("div", { class: "options-container" }, index.h("div", { class: "filters-container" }, index.h("div", { class: "current-treks-length" }, `${store.state.currentTreks.length} résultat${store.state.currentTreks.length > 1 ? 's' : ''}`), index.h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), index.h("div", null, index.h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), index.h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), index.h("div", { class: "attribution-container" }, index.h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), index.h("div", { class: "content-container" }, index.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' } }, index.h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !store.state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, index.h("span", { class: "loader" }))), store.state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, index.h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), index.h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "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 })), index.h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, index.h("div", { onClick: () => this.handleShowMap() }, this.showTreksMap || this.showTrekMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
111
+ return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, index.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 }), !store.state.currentTreks && !store.state.currentTrek && (index.h("div", { class: "init-loader-container" }, index.h("span", { class: "loader" }))), this.showTrek && this.currentTrekId && index.h("grw-trek-provider", { api: store.state.api, language: this.language, "trek-id": this.currentTrekId }), (store.state.currentTreks || store.state.currentTrek) && (index.h("div", { class: "app-container" }, index.h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (index.h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (index.h("div", { class: "handle-filters-container" }, index.h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER"), store.state.treksWithinBounds && (index.h("div", { class: "current-treks-within-bounds-length" }, `${store.state.treksWithinBounds.length} randonnée${store.state.treksWithinBounds.length > 1 ? 's' : ''}`)))), !this.showTrek && this.showFilters && (index.h("div", { class: "options-container" }, index.h("div", { class: "filters-container" }, index.h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), index.h("div", null, index.h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), index.h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), index.h("div", { class: "attribution-container" }, index.h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), index.h("div", { class: "content-container" }, index.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' } }, index.h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !store.state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, index.h("span", { class: "loader" }))), store.state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, index.h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), index.h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "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 })), index.h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, index.h("div", { onClick: () => this.handleShowMap() }, this.showTrek ? (this.showTrekMap ? 'Voir la fiche' : 'Voir la carte') : this.showTreksMap ? 'Voir la liste' : 'Voir la carte'))))));
85
112
  }
86
113
  get element() { return index.getElement(this); }
87
114
  static get watchers() { return {
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-c2c4531d.js');
6
- const store = require('./store-972b8d2a.js');
5
+ const index = require('./index-4c76daa3.js');
6
+ const store = require('./store-b4c3c507.js');
7
7
  const length = require('./length-d315d156.js');
8
8
 
9
9
  const grwFilterCss = ".filter-name{margin-left:8px;color:var(--color-primary);font-size:24px;font-weight:bold}.filter-button-container{display:flex;flex-direction:row;flex-wrap:wrap}.filter-button-container .filter-button,.filter-button-container .selected-filter-button{user-select:none;cursor:pointer;border:1px var(--color-primary) solid;border-radius:8px;margin:8px 0px 0px 8px;padding:8px}.filter-button-container .filter-button{color:var(--color-primary);background-color:#ffffff}.filter-button-container .selected-filter-button{color:#ffffff;background-color:var(--color-primary)}";
@@ -32,18 +32,17 @@ const GrwFilter = class {
32
32
  filtersTreks = [...filtersTreks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
33
33
  }
34
34
  else if (filter.type === 'interval') {
35
- let minValue;
36
- let maxValue;
37
- for (const currentFilterId of currentFiltersId) {
38
- const currentFilter = store.state[filter.property].find(property => property.id === currentFilterId);
39
- if (isNaN(minValue) || currentFilter.minValue < minValue) {
40
- minValue = currentFilter.minValue;
41
- }
42
- if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
43
- maxValue = currentFilter.maxValue;
44
- }
45
- }
46
- filtersTreks = [...filtersTreks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
35
+ filtersTreks = [
36
+ ...filtersTreks.filter(trek => {
37
+ for (const currentFilterId of currentFiltersId) {
38
+ const currentFilter = store.state[filter.property].find(property => property.id === currentFilterId);
39
+ if (trek[filter.trekProperty] >= currentFilter.minValue && trek[filter.trekProperty] <= currentFilter.maxValue) {
40
+ return true;
41
+ }
42
+ }
43
+ return false;
44
+ }),
45
+ ];
47
46
  }
48
47
  }
49
48
  else {
@@ -14235,8 +14234,9 @@ const GrwMap = class {
14235
14234
  this.colorArrivalIcon = '#85003b';
14236
14235
  this.colorSensitiveArea = ' #4974a5';
14237
14236
  this.colorPoiIcon = '#974c6e';
14237
+ this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
14238
14238
  }
14239
- componentDidLoad() {
14239
+ connectedCallback() {
14240
14240
  this.map = leafletSrc.map(this.element, {
14241
14241
  center: this.center.split(',').map(Number),
14242
14242
  zoom: this.zoom,
@@ -14249,7 +14249,7 @@ const GrwMap = class {
14249
14249
  if (store.state.currentTrek) {
14250
14250
  this.addTrek();
14251
14251
  }
14252
- else if (store.state.currentTrek) {
14252
+ else if (store.state.currentTreks) {
14253
14253
  this.addTreks();
14254
14254
  }
14255
14255
  store.onChange('currentTreks', () => {
@@ -14278,29 +14278,35 @@ const GrwMap = class {
14278
14278
  type: 'FeatureCollection',
14279
14279
  features: [],
14280
14280
  };
14281
- for (const trek of store.state.currentTreks) {
14282
- trekscurrentDepartureCoordinates.push(trek.departure_geom);
14283
- treksFeatureCollection.features.push({
14284
- type: 'Feature',
14285
- geometry: { type: 'Point', coordinates: trek.departure_geom },
14286
- properties: {
14287
- id: trek.id,
14288
- name: trek.name,
14289
- practice: (_a = store.state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
14290
- imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
14291
- },
14292
- });
14293
- }
14294
- if (trekscurrentDepartureCoordinates.length > 0) {
14295
- const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
14296
- this.currentBounds = bounds;
14297
- this.map.fitBounds(this.currentBounds);
14281
+ if (store.state.currentTreks) {
14282
+ for (const trek of store.state.currentTreks) {
14283
+ trekscurrentDepartureCoordinates.push(trek.departure_geom);
14284
+ treksFeatureCollection.features.push({
14285
+ type: 'Feature',
14286
+ geometry: { type: 'Point', coordinates: trek.departure_geom },
14287
+ properties: {
14288
+ id: trek.id,
14289
+ name: trek.name,
14290
+ practice: (_a = store.state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
14291
+ imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
14292
+ },
14293
+ });
14294
+ }
14298
14295
  }
14299
14296
  if (!this.treksLayer) {
14297
+ if (trekscurrentDepartureCoordinates.length > 0 && !store.state.currentMapTreksBounds) {
14298
+ const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
14299
+ this.map.fitBounds(bounds);
14300
+ }
14301
+ else {
14302
+ if (store.state.currentMapTreksBounds) {
14303
+ this.map.fitBounds(store.state.currentMapTreksBounds);
14304
+ }
14305
+ }
14300
14306
  this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
14301
14307
  pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
14302
14308
  icon: leafletSrc.divIcon({
14303
- html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
14309
+ html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : `<img />`,
14304
14310
  className: 'trek-marker',
14305
14311
  iconSize: 48,
14306
14312
  }),
@@ -14327,17 +14333,30 @@ const GrwMap = class {
14327
14333
  }).addTo(this.map);
14328
14334
  }
14329
14335
  else {
14336
+ if (trekscurrentDepartureCoordinates.length > 0) {
14337
+ const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
14338
+ this.map.fitBounds(bounds);
14339
+ }
14340
+ else {
14341
+ this.map.fire('moveend');
14342
+ }
14330
14343
  this.treksLayer.clearLayers();
14331
14344
  this.treksLayer.addData(treksFeatureCollection);
14332
14345
  }
14333
14346
  !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
14347
+ this.map.on('moveend', this.handleTreksWithinBoundsBind);
14334
14348
  }
14335
14349
  removeTreks() {
14336
14350
  if (this.treksLayer) {
14351
+ store.state.currentMapTreksBounds = this.map.getBounds();
14337
14352
  this.map.removeLayer(this.treksLayer);
14338
14353
  this.treksLayer = null;
14354
+ this.map.off('moveend', this.handleTreksWithinBoundsBind);
14339
14355
  }
14340
14356
  }
14357
+ handleTreksWithinBounds() {
14358
+ store.state.treksWithinBounds = store.state.currentTreks.filter(trek => this.map.getBounds().contains(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
14359
+ }
14341
14360
  addTrek() {
14342
14361
  const currentTrekFeature = {
14343
14362
  type: 'Feature',
@@ -14351,8 +14370,7 @@ const GrwMap = class {
14351
14370
  interactive: false,
14352
14371
  }).addTo(this.map);
14353
14372
  const bounds = leafletSrc.latLngBounds(store.state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
14354
- this.currentBounds = bounds;
14355
- this.map.fitBounds(this.currentBounds);
14373
+ this.map.fitBounds(bounds);
14356
14374
  const currentDepartureCoordinates = [store.state.currentTrek.geometry.coordinates.at(0)[0], store.state.currentTrek.geometry.coordinates.at(0)[1]];
14357
14375
  const currentArrivalCoordinates = [store.state.currentTrek.geometry.coordinates.at(-1)[0], store.state.currentTrek.geometry.coordinates.at(-1)[1]];
14358
14376
  const currentDepartureArrivalFeatureCollection = {
@@ -14595,7 +14613,7 @@ const GrwMap = class {
14595
14613
  };
14596
14614
  GrwMap.style = grwMapCss;
14597
14615
 
14598
- const grwTrekDetailCss = ".trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;align-self:center;width:100%;max-width:700px;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-detail-container .sub-container{padding:24px}.trek-detail-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-detail-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:24px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 8px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,.trek-detail-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:24px}.trek-detail-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-detail-container .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size:18px;margin-bottom:12px}.trek-detail-container .downloads-container .links-container{display:flex}.trek-detail-container .downloads-container .links-container a{background-color:var(--color-primary);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.trek-detail-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:0px 24px 24px 24px}.trek-detail-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-detail-container .ambiance,.trek-detail-container .description-teaser,.trek-detail-container .description-container,.trek-detail-container .altimetric-profile-container,.trek-detail-container .access-container,.trek-detail-container .public-transport-container,.trek-detail-container .advice-container,.trek-detail-container .advised-parking-container,.trek-detail-container .gear-container,.trek-detail-container .pois-container,.trek-detail-container .sensitive-areas-container,.trek-detail-container .information-desks-container,.trek-detail-container .source-container,.trek-detail-container .accessibilities-container{padding:0px 24px 24px 24px}.trek-detail-container .ambiance a,.trek-detail-container .description-teaser a,.trek-detail-container .description-container a,.trek-detail-container .altimetric-profile-container a,.trek-detail-container .access-container a,.trek-detail-container .public-transport-container a,.trek-detail-container .advice-container a,.trek-detail-container .advised-parking-container a,.trek-detail-container .gear-container a,.trek-detail-container .pois-container a,.trek-detail-container .sensitive-areas-container a,.trek-detail-container .information-desks-container a,.trek-detail-container .source-container a,.trek-detail-container .accessibilities-container a{color:var(--color-primary)}.trek-detail-container .description-title,.trek-detail-container .altimetric-profile-title,.trek-detail-container .access-title,.trek-detail-container .public-transport-title,.trek-detail-container .advice-title,.trek-detail-container .advised-parking-title,.trek-detail-container .gear-title,.trek-detail-container .pois-title,.trek-detail-container .sensitive-areas-title,.trek-detail-container .information-desks-title,.trek-detail-container .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;margin:12px 0px}.label-container .label-sub-container{display:flex;align-items:center}.label-container .label-sub-container img{width:26px;margin-right:16px}.label-container .label-sub-container .label-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.source-container .source-sub-container{display:flex;align-items:center}.source-container .source-sub-container img{width:26px;margin-right:16px}.source-container .source-sub-container .source-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.departure-container,.arrival-container{display:flex;align-items:center;padding:0px 24px 24px 24px}.departure-container .departure-title,.departure-container .arrival-title,.arrival-container .departure-title,.arrival-container .arrival-title{color:var(--color-primary);font-weight:bold}.accessibilities-container .accessibilities-content-container{padding:12px 0px 0px 0px;display:flex}.accessibilities-container .accessibilities-content-container .accessibility-content-container{display:flex;align-items:center;margin:0px 8px 8px 0px}.accessibilities-container .accessibilities-content-container .accessibility-content-container img{margin-right:16px;width:26px}.accessibilities-container .accessibility-level-title,.accessibilities-container .accessibility-slope-title,.accessibilities-container .accessibility-width-title,.accessibilities-container .accessibility-signage-title,.accessibilities-container .accessibility-covering-title,.accessibilities-container .accessibility-exposure-title,.accessibilities-container .accessibility-advice-title{color:var(--color-primary);font-size:24px;padding:12px 0px}";
14616
+ const grwTrekDetailCss = "grw-sensitive-area-detail,grw-information-desk-detail,grw-poi-detail{margin-top:12px}.trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;align-self:center;width:100%;max-width:700px;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-detail-container .sub-container{padding:24px}.trek-detail-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-detail-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:24px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 8px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,.trek-detail-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:24px}.trek-detail-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-detail-container .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size:18px;margin-bottom:12px}.trek-detail-container .downloads-container .links-container{display:flex}.trek-detail-container .downloads-container .links-container a{background-color:var(--color-primary);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.trek-detail-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:0px 24px 24px 24px}.trek-detail-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-detail-container .ambiance,.trek-detail-container .description-teaser,.trek-detail-container .description-container,.trek-detail-container .altimetric-profile-container,.trek-detail-container .access-container,.trek-detail-container .public-transport-container,.trek-detail-container .advice-container,.trek-detail-container .advised-parking-container,.trek-detail-container .gear-container,.trek-detail-container .pois-container,.trek-detail-container .sensitive-areas-container,.trek-detail-container .information-desks-container,.trek-detail-container .source-container,.trek-detail-container .accessibilities-container{padding:0px 24px 24px 24px}.trek-detail-container .ambiance a,.trek-detail-container .description-teaser a,.trek-detail-container .description-container a,.trek-detail-container .altimetric-profile-container a,.trek-detail-container .access-container a,.trek-detail-container .public-transport-container a,.trek-detail-container .advice-container a,.trek-detail-container .advised-parking-container a,.trek-detail-container .gear-container a,.trek-detail-container .pois-container a,.trek-detail-container .sensitive-areas-container a,.trek-detail-container .information-desks-container a,.trek-detail-container .source-container a,.trek-detail-container .accessibilities-container a{color:var(--color-primary)}.trek-detail-container .description-title,.trek-detail-container .altimetric-profile-title,.trek-detail-container .access-title,.trek-detail-container .public-transport-title,.trek-detail-container .advice-title,.trek-detail-container .advised-parking-title,.trek-detail-container .gear-title,.trek-detail-container .pois-title,.trek-detail-container .sensitive-areas-title,.trek-detail-container .information-desks-title,.trek-detail-container .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;margin:12px 0px}.label-container .label-sub-container{display:flex;align-items:center}.label-container .label-sub-container img{width:26px;margin-right:16px}.label-container .label-sub-container .label-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.source-container .source-sub-container{display:flex;align-items:center}.source-container .source-sub-container img{width:26px;margin-right:16px}.source-container .source-sub-container .source-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.departure-container,.arrival-container{display:flex;align-items:center;padding:0px 24px 24px 24px}.departure-container .departure-title,.departure-container .arrival-title,.arrival-container .departure-title,.arrival-container .arrival-title{color:var(--color-primary);font-weight:bold}.accessibilities-container .accessibilities-content-container{padding:12px 0px 0px 0px;display:flex}.accessibilities-container .accessibilities-content-container .accessibility-content-container{display:flex;align-items:center;margin:0px 8px 8px 0px}.accessibilities-container .accessibilities-content-container .accessibility-content-container img{margin-right:16px;width:26px}.accessibilities-container .accessibility-level-title,.accessibilities-container .accessibility-slope-title,.accessibilities-container .accessibility-width-title,.accessibilities-container .accessibility-signage-title,.accessibilities-container .accessibility-covering-title,.accessibilities-container .accessibility-exposure-title,.accessibilities-container .accessibility-advice-title{color:var(--color-primary);font-size:24px;padding:12px 0px}";
14599
14617
 
14600
14618
  const GrwTrekDetail = class {
14601
14619
  constructor(hostRef) {
@@ -14604,7 +14622,7 @@ const GrwTrekDetail = class {
14604
14622
  this.colorPrimaryShade = '#4a0021';
14605
14623
  this.colorPrimaryTint = '#974c6e';
14606
14624
  }
14607
- componentWillLoad() {
14625
+ connectedCallback() {
14608
14626
  this.currentTrek = this.trek ? this.trek : store.state.currentTrek;
14609
14627
  if (this.currentTrek) {
14610
14628
  this.difficulty = store.state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
@@ -14614,7 +14632,9 @@ const GrwTrekDetail = class {
14614
14632
  this.labels = store.state.labels.filter(label => this.currentTrek.labels.includes(label.id));
14615
14633
  this.sources = store.state.sources.filter(source => this.currentTrek.source.includes(source.id));
14616
14634
  this.accessibilities = store.state.accessibilities.filter(accessibility => this.currentTrek.accessibilities.includes(accessibility.id));
14617
- this.accessibilityLevel = store.state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
14635
+ if (store.state.accessibilitiesLevel) {
14636
+ this.accessibilityLevel = store.state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
14637
+ }
14618
14638
  }
14619
14639
  store.onChange('currentTrek', () => {
14620
14640
  this.currentTrek = this.trek ? this.trek : store.state.currentTrek;
@@ -14625,6 +14645,10 @@ const GrwTrekDetail = class {
14625
14645
  this.themes = store.state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
14626
14646
  this.labels = store.state.labels.filter(label => this.currentTrek.labels.includes(label.id));
14627
14647
  this.sources = store.state.sources.filter(source => this.currentTrek.source.includes(source.id));
14648
+ this.accessibilities = store.state.accessibilities.filter(accessibility => this.currentTrek.accessibilities.includes(accessibility.id));
14649
+ if (store.state.accessibilitiesLevel) {
14650
+ this.accessibilityLevel = store.state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
14651
+ }
14628
14652
  }
14629
14653
  });
14630
14654
  }
@@ -14633,7 +14657,17 @@ const GrwTrekDetail = class {
14633
14657
  return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-shade': this.colorPrimaryShade, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (index.h("div", { class: "trek-detail-container" }, index.h("div", { class: "name" }, this.currentTrek.name), this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (index.h("img", { class: "image", src: this.currentTrek.attachments[0].thumbnail, loading: "lazy" })), index.h("div", { class: "sub-container" }, index.h("div", { class: "icons-labels-container" }, index.h("div", { class: "row" }, index.h("div", { class: "icon-label difficulty" }, ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && index.h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
14634
14658
  _b.label), index.h("div", { class: "icon-label duration" }, index.h("div", { class: "svg-icon", innerHTML: length.durationImage }), length.formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)), index.h("div", { class: "icon-label route" }, ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && index.h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
14635
14659
  _e.route)), index.h("div", { class: "row" }, index.h("div", { class: "icon-label length" }, index.h("div", { class: "svg-icon", innerHTML: length.lengthImage }), length.formatLength(this.currentTrek.length_2d)), index.h("div", { class: "icon-label ascent" }, index.h("div", { class: "svg-icon", innerHTML: length.ascentImage }), length.formatAscent(this.currentTrek.ascent)), index.h("div", { class: "icon-label practice" }, ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && index.h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
14636
- _g.name)))), index.h("div", { class: "downloads-container" }, index.h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), index.h("div", { class: "links-container" }, index.h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), index.h("a", { href: `${this.currentTrek.kml}` }, "KML"), index.h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), this.themes.length > 0 && (index.h("div", { class: "themes-container" }, this.themes.map(theme => (index.h("div", { class: "theme" }, theme.label))))), this.currentTrek.description_teaser && index.h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && index.h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), this.currentTrek.description && (index.h("div", { class: "description-container" }, index.h("div", { class: "description-title" }, "Description"), index.h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (index.h("div", { class: "departure-container" }, index.h("div", { class: "departure-title" }, "D\u00E9part :\u00A0"), index.h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (index.h("div", { class: "arrival-container" }, index.h("div", { class: "arrival-title" }, "Arriv\u00E9e :\u00A0"), index.h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.altimetric_profile && (index.h("div", { class: "altimetric-profile-container" }, index.h("div", { class: "altimetric-profile-title" }, "Profil altim\u00E9trique"), index.h("img", { src: this.currentTrek.altimetric_profile }))), this.currentTrek.access && (index.h("div", { class: "access-container" }, index.h("div", { class: "access-title" }, "Acc\u00E8s routier"), index.h("div", { class: "access", innerHTML: this.currentTrek.access }))), this.currentTrek.public_transport && (index.h("div", { class: "public-transport-container" }, index.h("div", { class: "public-transport-title" }, "Transport"), index.h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport }))), (this.currentTrek.advice || this.labels.length > 0) && (index.h("div", { class: "advice-container" }, index.h("div", { class: "advice-title" }, "Recommandations"), this.currentTrek.advice && index.h("div", { class: "advice", innerHTML: this.currentTrek.advice }), this.labels.map(label => (index.h("div", { class: "label-container" }, index.h("div", { class: "label-sub-container" }, label.pictogram && index.h("img", { src: label.pictogram }), index.h("div", { class: "label-name", innerHTML: label.name })), index.h("div", { class: "label-advice", innerHTML: label.advice })))))), this.currentTrek.advised_parking && (index.h("div", { class: "advised-parking-container" }, index.h("div", { class: "advised-parking-title" }, "Parking conseill\u00E9"), index.h("div", { class: "advised_parking", innerHTML: this.currentTrek.advised_parking }))), this.currentTrek.gear && (index.h("div", { class: "gear-container" }, index.h("div", { class: "gear-title" }, "\u00C9quipements"), index.h("div", { class: "gear", innerHTML: this.currentTrek.gear }))), store.state.currentSensitiveAreas && store.state.currentSensitiveAreas.length > 0 && (index.h("div", { class: "sensitive-areas-container" }, index.h("div", { class: "sensitive-areas-title" }, "Zones de sensibilit\u00E9 environnementale"), store.state.currentSensitiveAreas.map(sensitiveArea => (index.h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))), store.state.currentInformationDesks && store.state.currentInformationDesks.length > 0 && (index.h("div", { class: "information-desks-container" }, index.h("div", { class: "information-desks-title" }, "Lieux de renseignement"), store.state.currentInformationDesks.map(informationDesk => (index.h("grw-information-desk-detail", { informationDesk: informationDesk }))))), index.h("div", { class: "accessibilities-container" }, index.h("div", { class: "accessibilities-title" }, "Accessibilit\u00E9"), this.currentTrek.disabled_infrastructure && index.h("div", { innerHTML: this.currentTrek.disabled_infrastructure }), index.h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (index.h("div", { class: "accessibility-content-container" }, index.h("img", { src: accessibility.pictogram }), index.h("div", { innerHTML: accessibility.name }))))), this.currentTrek.accessibility_level && (index.h("div", { class: "accessibility-level-container" }, index.h("div", { class: "accessibility-level-title" }, "Niveau d'accessibilit\u00E9"), index.h("div", { innerHTML: this.accessibilityLevel.name }))), this.currentTrek.accessibility_slope && (index.h("div", { class: "accessibility-slope-container" }, index.h("div", { class: "accessibility-slope-title" }, "Pente"), index.h("div", { innerHTML: this.currentTrek.accessibility_slope }))), this.currentTrek.accessibility_width && (index.h("div", { class: "accessibility-width-container" }, index.h("div", { class: "accessibility-width-title" }, "Largeur"), index.h("div", { innerHTML: this.currentTrek.accessibility_width }))), this.currentTrek.accessibility_signage && (index.h("div", { class: "accessibility-signage-container" }, index.h("div", { class: "accessibility-signage-title" }, "Pente"), index.h("div", { innerHTML: this.currentTrek.accessibility_signage }))), this.currentTrek.accessibility_covering && (index.h("div", { class: "accessibility-covering-container" }, index.h("div", { class: "accessibility-covering-title" }, "Rev\u00EAtement"), index.h("div", { innerHTML: this.currentTrek.accessibility_covering }))), this.currentTrek.accessibility_exposure && (index.h("div", { class: "accessibility-exposure-container" }, index.h("div", { class: "accessibility-exposure-title" }, "Exposition"), index.h("div", { innerHTML: this.currentTrek.accessibility_exposure }))), this.currentTrek.accessibility_advice && (index.h("div", { class: "accessibility-advice-container" }, index.h("div", { class: "accessibility-advice-title" }, "Conseils"), index.h("div", { innerHTML: this.currentTrek.accessibility_advice })))), store.state.currentPois && store.state.currentPois.length > 0 && (index.h("div", { class: "pois-container" }, index.h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"), store.state.currentPois.map(poi => (index.h("grw-poi-detail", { poi: poi }))))), this.currentTrek.source && this.currentTrek.source.length > 0 && (index.h("div", { class: "source-container" }, index.h("div", { class: "source-title" }, "Sources"), this.sources.map(source => (index.h("div", { class: "source-sub-container" }, source.pictogram && index.h("img", { src: source.pictogram }), index.h("div", null, index.h("div", { class: "source-name", innerHTML: source.name }), index.h("a", { class: "source-advice", innerHTML: source.website })))))))))));
14660
+ _g.name)))), index.h("div", { class: "downloads-container" }, index.h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), index.h("div", { class: "links-container" }, index.h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), index.h("a", { href: `${this.currentTrek.kml}` }, "KML"), index.h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), this.themes.length > 0 && (index.h("div", { class: "themes-container" }, this.themes.map(theme => (index.h("div", { class: "theme" }, theme.label))))), this.currentTrek.description_teaser && index.h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && index.h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), this.currentTrek.description && (index.h("div", { class: "description-container" }, index.h("div", { class: "description-title" }, "Description"), index.h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (index.h("div", { class: "departure-container" }, index.h("div", { class: "departure-title" }, "D\u00E9part :\u00A0"), index.h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (index.h("div", { class: "arrival-container" }, index.h("div", { class: "arrival-title" }, "Arriv\u00E9e :\u00A0"), index.h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.altimetric_profile && (index.h("div", { class: "altimetric-profile-container" }, index.h("div", { class: "altimetric-profile-title" }, "Profil altim\u00E9trique"), index.h("img", { src: this.currentTrek.altimetric_profile.endsWith('.json')
14661
+ ? this.currentTrek.altimetric_profile.replace('.json', '.svg')
14662
+ : `${this.currentTrek.altimetric_profile}?format=svg` }))), this.currentTrek.access && (index.h("div", { class: "access-container" }, index.h("div", { class: "access-title" }, "Acc\u00E8s routier"), index.h("div", { class: "access", innerHTML: this.currentTrek.access }))), this.currentTrek.public_transport && (index.h("div", { class: "public-transport-container" }, index.h("div", { class: "public-transport-title" }, "Transport"), index.h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport }))), (this.currentTrek.advice || this.labels.length > 0) && (index.h("div", { class: "advice-container" }, index.h("div", { class: "advice-title" }, "Recommandations"), this.currentTrek.advice && index.h("div", { class: "advice", innerHTML: this.currentTrek.advice }), this.labels.map(label => (index.h("div", { class: "label-container" }, index.h("div", { class: "label-sub-container" }, label.pictogram && index.h("img", { src: label.pictogram }), index.h("div", { class: "label-name", innerHTML: label.name })), index.h("div", { class: "label-advice", innerHTML: label.advice })))))), this.currentTrek.advised_parking && (index.h("div", { class: "advised-parking-container" }, index.h("div", { class: "advised-parking-title" }, "Parking conseill\u00E9"), index.h("div", { class: "advised_parking", innerHTML: this.currentTrek.advised_parking }))), this.currentTrek.gear && (index.h("div", { class: "gear-container" }, index.h("div", { class: "gear-title" }, "\u00C9quipements"), index.h("div", { class: "gear", innerHTML: this.currentTrek.gear }))), store.state.currentSensitiveAreas && store.state.currentSensitiveAreas.length > 0 && (index.h("div", { class: "sensitive-areas-container" }, index.h("div", { class: "sensitive-areas-title" }, "Zones de sensibilit\u00E9 environnementale"), store.state.currentSensitiveAreas.map(sensitiveArea => (index.h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))), store.state.currentInformationDesks && store.state.currentInformationDesks.length > 0 && (index.h("div", { class: "information-desks-container" }, index.h("div", { class: "information-desks-title" }, "Lieux de renseignement"), store.state.currentInformationDesks.map(informationDesk => (index.h("grw-information-desk-detail", { informationDesk: informationDesk }))))), (this.currentTrek.disabled_infrastructure ||
14663
+ (this.accessibilities && this.accessibilities.length > 0) ||
14664
+ this.currentTrek.accessibility_level ||
14665
+ this.currentTrek.accessibility_slope ||
14666
+ this.currentTrek.accessibility_width ||
14667
+ this.currentTrek.accessibility_signage ||
14668
+ this.currentTrek.accessibility_covering ||
14669
+ this.currentTrek.accessibility_exposure ||
14670
+ this.currentTrek.accessibility_advice) && (index.h("div", { class: "accessibilities-container" }, index.h("div", { class: "accessibilities-title" }, "Accessibilit\u00E9"), this.currentTrek.disabled_infrastructure && index.h("div", { innerHTML: this.currentTrek.disabled_infrastructure }), index.h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (index.h("div", { class: "accessibility-content-container" }, index.h("img", { src: accessibility.pictogram }), index.h("div", { innerHTML: accessibility.name }))))), this.currentTrek.accessibility_level && (index.h("div", { class: "accessibility-level-container" }, index.h("div", { class: "accessibility-level-title" }, "Niveau d'accessibilit\u00E9"), index.h("div", { innerHTML: this.accessibilityLevel.name }))), this.currentTrek.accessibility_slope && (index.h("div", { class: "accessibility-slope-container" }, index.h("div", { class: "accessibility-slope-title" }, "Pente"), index.h("div", { innerHTML: this.currentTrek.accessibility_slope }))), this.currentTrek.accessibility_width && (index.h("div", { class: "accessibility-width-container" }, index.h("div", { class: "accessibility-width-title" }, "Largeur"), index.h("div", { innerHTML: this.currentTrek.accessibility_width }))), this.currentTrek.accessibility_signage && (index.h("div", { class: "accessibility-signage-container" }, index.h("div", { class: "accessibility-signage-title" }, "Pente"), index.h("div", { innerHTML: this.currentTrek.accessibility_signage }))), this.currentTrek.accessibility_covering && (index.h("div", { class: "accessibility-covering-container" }, index.h("div", { class: "accessibility-covering-title" }, "Rev\u00EAtement"), index.h("div", { innerHTML: this.currentTrek.accessibility_covering }))), this.currentTrek.accessibility_exposure && (index.h("div", { class: "accessibility-exposure-container" }, index.h("div", { class: "accessibility-exposure-title" }, "Exposition"), index.h("div", { innerHTML: this.currentTrek.accessibility_exposure }))), this.currentTrek.accessibility_advice && (index.h("div", { class: "accessibility-advice-container" }, index.h("div", { class: "accessibility-advice-title" }, "Conseils"), index.h("div", { innerHTML: this.currentTrek.accessibility_advice }))))), store.state.currentPois && store.state.currentPois.length > 0 && (index.h("div", { class: "pois-container" }, index.h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"), store.state.currentPois.map(poi => (index.h("grw-poi-detail", { poi: poi }))))), this.currentTrek.source && this.currentTrek.source.length > 0 && (index.h("div", { class: "source-container" }, index.h("div", { class: "source-title" }, "Sources"), this.sources.map(source => (index.h("div", { class: "source-sub-container" }, source.pictogram && index.h("img", { src: source.pictogram }), index.h("div", null, index.h("div", { class: "source-name", innerHTML: source.name }), index.h("a", { class: "source-advice", innerHTML: source.website })))))))))));
14637
14671
  }
14638
14672
  };
14639
14673
  GrwTrekDetail.style = grwTrekDetailCss;
@@ -14642,27 +14676,33 @@ const GrwTrekProvider = class {
14642
14676
  constructor(hostRef) {
14643
14677
  index.registerInstance(this, hostRef);
14644
14678
  this.language = 'fr';
14679
+ this.trekNetworkError = false;
14680
+ this.controller = new AbortController();
14681
+ this.signal = this.controller.signal;
14645
14682
  }
14646
- componentWillLoad() {
14683
+ connectedCallback() {
14647
14684
  store.state.api = this.api;
14648
14685
  const requests = [];
14649
- requests.push(!store.state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
14650
- requests.push(!store.state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`) : new Response('null'));
14651
- requests.push(!store.state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`) : new Response('null'));
14652
- requests.push(!store.state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
14653
- return Promise.all([
14686
+ requests.push(!store.state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }) : new Response('null'));
14687
+ requests.push(!store.state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`, { signal: this.signal }) : new Response('null'));
14688
+ requests.push(!store.state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }) : new Response('null'));
14689
+ requests.push(!store.state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }) : new Response('null'));
14690
+ Promise.all([
14654
14691
  ...requests,
14655
- fetch(`${this.api}sensitivearea/?language=${this.language}&published=true&trek=${this.trekId}&fields=id,geometry,name,description,contact,info_url,period,practices`).catch(() => new Response('null')),
14656
- fetch(`${this.api}label/?language=${this.language}&fields=id,name,advice,pictogram`),
14657
- fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`),
14658
- fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`),
14659
- fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`),
14660
- 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`),
14661
- 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`),
14662
- fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`),
14692
+ fetch(`${this.api}sensitivearea/?language=${this.language}&published=true&trek=${this.trekId}&fields=id,geometry,name,description,contact,info_url,period,practices`, {
14693
+ signal: this.signal,
14694
+ }).catch(() => new Response('null')),
14695
+ fetch(`${this.api}label/?language=${this.language}&fields=id,name,advice,pictogram`, { signal: this.signal }),
14696
+ fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`, { signal: this.signal }),
14697
+ fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }),
14698
+ fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`, { signal: this.signal }).catch(() => new Response('null')),
14699
+ 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`, { signal: this.signal }),
14700
+ 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`, { signal: this.signal }),
14701
+ fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`, { signal: this.signal }),
14663
14702
  ])
14664
14703
  .then(responses => Promise.all(responses.map(response => response.json())))
14665
14704
  .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, informationDesks, trek]) => {
14705
+ store.state.trekNetworkError = false;
14666
14706
  if (difficulties) {
14667
14707
  store.state.difficulties = difficulties.results;
14668
14708
  }
@@ -14681,21 +14721,28 @@ const GrwTrekProvider = class {
14681
14721
  store.state.labels = labels.results;
14682
14722
  store.state.sources = sources.results;
14683
14723
  store.state.accessibilities = accessibilities.results;
14684
- store.state.accessibilitiesLevel = accessibilitiesLevel.results;
14724
+ if (accessibilitiesLevel) {
14725
+ store.state.accessibilitiesLevel = accessibilitiesLevel.results;
14726
+ }
14685
14727
  store.state.currentPois = pois.results;
14686
14728
  store.state.currentInformationDesks = informationDesks.results;
14687
14729
  store.state.currentTrek = trek;
14730
+ })
14731
+ .catch(() => {
14732
+ store.state.trekNetworkError = true;
14688
14733
  });
14689
14734
  }
14690
14735
  disconnectedCallback() {
14736
+ this.controller.abort();
14691
14737
  store.state.currentTrek = null;
14738
+ store.state.trekNetworkError = false;
14692
14739
  }
14693
14740
  render() {
14694
14741
  return index.h(index.Host, null);
14695
14742
  }
14696
14743
  };
14697
14744
 
14698
- const grwTreksListCss = ":host{font-family:\"Roboto\";width:100%;height:100%;max-height:100vh;overflow-y:auto}.current-treks-length{width:100%;text-align:center;padding:32px 0px;color:var(--color-primary);font-size:24px;font-weight:bold}.current-treks-container{display:flex;flex-wrap:wrap;justify-content:space-around}grw-trek-card{margin:6px}";
14745
+ const grwTreksListCss = ":host{font-family:\"Roboto\";width:100%;height:100%;max-height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;justify-content:space-around}grw-trek-card{margin:6px}";
14699
14746
 
14700
14747
  const GrwTreksList = class {
14701
14748
  constructor(hostRef) {
@@ -14704,28 +14751,42 @@ const GrwTreksList = class {
14704
14751
  this.colorPrimary = '#6b0030';
14705
14752
  this.colorPrimaryTint = '#974c6e';
14706
14753
  this.isLargeView = false;
14707
- this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
14708
14754
  this.step = 10;
14755
+ this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
14709
14756
  }
14710
- componentWillLoad() {
14757
+ connectedCallback() {
14758
+ this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
14759
+ if (store.state.currentTreks) {
14760
+ this.treksToDisplay = [...store.state.currentTreks.slice(0, this.step)];
14761
+ }
14711
14762
  store.onChange('currentTreks', () => {
14712
- this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
14713
14763
  this.element.scroll({ top: 0 });
14714
- this.treksToDisplay = [...store.state.currentTreks.slice(0, this.step)];
14764
+ if (store.state.currentTreks) {
14765
+ this.treksToDisplay = [...store.state.currentTreks.slice(0, this.step)];
14766
+ }
14767
+ });
14768
+ store.onChange('treksWithinBounds', () => {
14769
+ this.element.scroll({ top: 0 });
14770
+ if (store.state.treksWithinBounds) {
14771
+ this.treksToDisplay = [...store.state.treksWithinBounds.slice(0, this.step)];
14772
+ }
14715
14773
  });
14716
14774
  }
14717
14775
  handleInfiniteScroll(event) {
14718
14776
  if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
14719
- if (this.treksToDisplay.length < store.state.treks.length) {
14720
- this.treksToDisplay = store.state.currentTreks.slice(0, this.treksToDisplay.length + this.step >= store.state.currentTreks.length ? store.state.currentTreks.length : this.treksToDisplay.length + this.step);
14777
+ if (this.treksToDisplay.length < store.state.treksWithinBounds.length) {
14778
+ this.treksToDisplay = store.state.treksWithinBounds.slice(0, this.treksToDisplay.length + this.step >= store.state.treksWithinBounds.length ? store.state.treksWithinBounds.length : this.treksToDisplay.length + this.step);
14721
14779
  }
14722
14780
  else {
14723
14781
  this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
14724
14782
  }
14725
14783
  }
14726
14784
  }
14785
+ disconnectedCallback() {
14786
+ this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
14787
+ }
14727
14788
  render() {
14728
- return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, index.h("div", { class: "current-treks-length" }, `${store.state.currentTreks.length} résultat${store.state.currentTreks.length > 1 ? 's' : ''}`), index.h("div", { class: "current-treks-container" }, this.treksToDisplay.map(trek => (index.h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))))));
14789
+ return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (index.h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
14729
14790
  }
14730
14791
  get element() { return index.getElement(this); }
14731
14792
  };
@@ -14735,8 +14796,10 @@ const GrwTreksProvider = class {
14735
14796
  constructor(hostRef) {
14736
14797
  index.registerInstance(this, hostRef);
14737
14798
  this.language = 'fr';
14799
+ this.controller = new AbortController();
14800
+ this.signal = this.controller.signal;
14738
14801
  }
14739
- componentWillLoad() {
14802
+ connectedCallback() {
14740
14803
  store.state.api = this.api;
14741
14804
  let treksRequest = `${this.api}trek/?language=${this.language}&published=true`;
14742
14805
  this.inBbox && (treksRequest += `&in_bbox=${this.inBbox}`);
@@ -14748,15 +14811,16 @@ const GrwTreksProvider = class {
14748
14811
  this.routes && (treksRequest += `&routes=${this.routes}`);
14749
14812
  this.practices && (treksRequest += `&practices=${this.practices}`);
14750
14813
  treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,departure,departure_geom&page_size=999`;
14751
- return Promise.all([
14752
- fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
14753
- fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
14754
- fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
14755
- fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`),
14756
- fetch(treksRequest),
14814
+ Promise.all([
14815
+ fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }),
14816
+ fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`, { signal: this.signal }),
14817
+ fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }),
14818
+ fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`, { signal: this.signal }),
14819
+ fetch(treksRequest, { signal: this.signal }),
14757
14820
  ])
14758
14821
  .then(responses => Promise.all(responses.map(response => response.json())))
14759
14822
  .then(([difficulties, routes, practices, themes, treks]) => {
14823
+ store.state.treksNetworkError = false;
14760
14824
  store.state.difficulties = difficulties.results;
14761
14825
  store.state.routes = routes.results;
14762
14826
  store.state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
@@ -14769,7 +14833,13 @@ const GrwTreksProvider = class {
14769
14833
  ];
14770
14834
  store.state.treks = treks.results;
14771
14835
  store.state.currentTreks = treks.results;
14772
- });
14836
+ store.state.treksWithinBounds = treks.results;
14837
+ })
14838
+ .catch(() => (store.state.treksNetworkError = true));
14839
+ }
14840
+ disconnectedCallback() {
14841
+ this.controller.abort();
14842
+ store.state.treksNetworkError = false;
14773
14843
  }
14774
14844
  render() {
14775
14845
  return index.h(index.Host, null);