@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.2

package/dist/cjs/geotrek-rando-widget.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-31255e29.js');
+const index = require('./index-c6f73e30.js');
 
 /*
  Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["grw-app_7.cjs",[[1,"grw-app",{"api":[1],"portals":[1],"appName":[1,"app-name"],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"showTrek":[32],"showMap":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-treks-list",{"treksToDisplay":[32]}],[0,"grw-map",{"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"]}],[1,"grw-trek-detail",{"trek":[16]}],[0,"grw-trek-provider",{"api":[1],"trekId":[1,"trek-id"]}],[0,"grw-treks-provider",{"api":[1],"portals":[1]}],[1,"grw-trek-card",{"trek":[16]}]]]], options);
+  return index.bootstrapLazy([["grw-app_7.cjs",[[1,"grw-app",{"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"showTrek":[32],"showMap":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"treksToDisplay":[32]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"mapIsReady":[32]}],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}]]]], options);
 });

package/dist/cjs/grw-app_7.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-31255e29.js');
+const index = require('./index-c6f73e30.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -199,32 +199,50 @@ const { state, onChange } = createStore({
 
 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 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    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 (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, index.h("grw-treks-provider", { api: this.api, portals: this.portals }, index.h("div", { class: "header-container" }, this.showTrek ? index.h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : index.h("div", { class: "title" }, this.appName)), index.h("div", { class: "content-container" }, index.h("div", { class: "app-treks-list-container", style: { visibility: this.showTrek ? 'hidden' : 'visible', position: this.showTrek ? 'absolute' : 'relative' } }, index.h("grw-treks-list", null)), this.showTrek && !state.currentTrek && (index.h("div", { class: "loader-container" }, index.h("span", { class: "loader" }))), this.showTrek && this.currentTrekId && (index.h("grw-trek-provider", { api: state.api, "trek-id": this.currentTrekId }, state.currentTrek && (index.h("div", { class: "app-trek-detail-container" }, index.h("grw-trek-detail", null))))), index.h("div", { class: "app-map-container", style: { visibility: this.showMap ? 'visible' : 'hidden' } }, index.h("grw-map", null))), index.h("div", { class: "map-visibility-button" }, index.h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+    return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, index.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 && index.h("grw-trek-provider", { api: state.api, "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: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : index.h("div", { class: "title" }, this.appName)), 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", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, index.h("span", { class: "loader" }))), 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-tint": this.colorPrimaryTint }))), index.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 })), index.h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, index.h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "isLargeView": ["watchPropHandler"]
+  }; }
 };
 GrwApp.style = grwAppCss;
 
@@ -14367,32 +14385,45 @@ var leafletSrc = createCommonjsModule(function (module, exports) {
 //# sourceMappingURL=leaflet-src.js.map
 });
 
-const departureArrivalImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style=";fill:none;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`;
+const departureArrivalImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style=";fill:#ffffff;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`;
 
-const grwMapCss = ".leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none !important;max-height:none !important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none !important;max-height:none !important;width:auto;padding:0}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51, 181, 229, 0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078A8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font-family:\"Helvetica Neue\", Arial, Helvetica, sans-serif;font-size:12px;font-size:0.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console', Monaco, monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255, 255, 255, 0.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-control-attribution svg{display:inline !important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255, 255, 255, 0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma, Verdana, sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:\"\"}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;color-adjust:exact}}grw-map{display:block;height:100%}.departure-icon svg,.arrival-icon svg{width:48px;height:48px}.departure-icon svg path,.arrival-icon svg path{fill:currentColor;stroke:currentColor}.departure-icon{color:var(--color-departure-icon)}.arrival-icon{color:var(--color-arrival-icon)}.trek-marker{background-color:var(--color-primary);border-radius:50%}";
+const grwMapCss = ".leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none !important;max-height:none !important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none !important;max-height:none !important;width:auto;padding:0}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51, 181, 229, 0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078A8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font-family:\"Helvetica Neue\", Arial, Helvetica, sans-serif;font-size:12px;font-size:0.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console', Monaco, monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255, 255, 255, 0.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-control-attribution svg{display:inline !important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255, 255, 255, 0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma, Verdana, sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:\"\"}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;color-adjust:exact}}grw-map{display:block;height:100%;max-height:100vh}.departure-icon svg,.arrival-icon svg{width:48px;height:48px}.departure-icon svg path,.arrival-icon svg path{fill:currentColor;stroke:currentColor}.departure-icon{color:var(--color-departure-icon)}.arrival-icon{color:var(--color-arrival-icon)}.trek-marker{background-color:var(--color-primary);border-radius:50%;display:flex;justify-content:center;align-items:center}.trek-marker img{width:36px !important}.map-loader-container{position:absolute;z-index:500;width:100%;height:100%;background:rgba(255, 255, 255, 0.5);display:flex;justify-content:center;align-items:center}.map-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)}}";
 
 const GrwMap = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.mapIsReady = false;
+    this.center = '1, 1';
+    this.zoom = 10;
     this.colorTrekLine = '#6b0030';
     this.colorDepartureIcon = '#006b3b';
     this.colorArrivalIcon = '#85003b';
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
   }
   componentDidLoad() {
     this.map = leafletSrc.map(this.element, {
-      center: [1, 1],
-      zoom: 10,
+      center: this.center.split(',').map(Number),
+      zoom: this.zoom,
     });
-    leafletSrc.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    leafletSrc.tileLayer(this.urlLayer, {
       maxZoom: 19,
-      attribution: '© OpenStreetMap',
+      attribution: this.attribution,
     }).addTo(this.map);
     if (state.currentTrek) {
       this.addTrek();
     }
-    else {
+    else if (state.currentTrek) {
       this.addTreks();
     }
+    onChange('treks', () => {
+      if (state.currentTrek) {
+        this.addTrek();
+      }
+      else if (state.treks) {
+        this.addTreks();
+      }
+    });
     onChange('currentTrek', () => {
       if (state.currentTrek) {
         this.removeTreks();
@@ -14405,6 +14436,7 @@ const GrwMap = class {
     });
   }
   addTreks() {
+    var _a;
     const treksDepartureCoordinates = [];
     const treksFeatureCollection = {
       type: 'FeatureCollection',
@@ -14414,28 +14446,32 @@ const GrwMap = class {
       treksDepartureCoordinates.push(trek.departure_geom);
       treksFeatureCollection.features.push({
         type: 'Feature',
-        properties: {},
+        properties: { practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram },
         geometry: { type: 'Point', coordinates: trek.departure_geom },
       });
     }
     if (treksDepartureCoordinates.length > 0) {
       const bounds = leafletSrc.latLngBounds(treksDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-      this.map.fitBounds(bounds);
+      this.currentBounds = bounds;
+      this.map.fitBounds(this.currentBounds);
     }
     this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
-      pointToLayer: (_geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
+      pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
         icon: leafletSrc.divIcon({
           className: 'trek-marker',
           iconSize: 48,
-          iconAnchor: [0, 48],
+          html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : '',
         }),
         autoPanOnFocus: false,
       }),
     }).addTo(this.map);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTreks() {
-    this.map.removeLayer(this.treksLayer);
-    this.treksLayer = null;
+    if (this.treksLayer) {
+      this.map.removeLayer(this.treksLayer);
+      this.treksLayer = null;
+    }
   }
   addTrek() {
     const trekFeature = {
@@ -14449,7 +14485,8 @@ const GrwMap = class {
       }),
     }).addTo(this.map);
     const bounds = leafletSrc.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-    this.map.fitBounds(bounds);
+    this.currentBounds = bounds;
+    this.map.fitBounds(this.currentBounds);
     const departureCoordinates = [state.currentTrek.geometry.coordinates.at(0)[0], state.currentTrek.geometry.coordinates.at(0)[1]];
     const arrivalCoordinates = [state.currentTrek.geometry.coordinates.at(-1)[0], state.currentTrek.geometry.coordinates.at(-1)[1]];
     const departureArrivalFeatureCollection = {
@@ -14480,15 +14517,25 @@ const GrwMap = class {
         autoPanOnFocus: false,
       }),
     }).addTo(this.map);
+    !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTrek() {
-    this.map.removeLayer(this.trekLayer);
-    this.map.removeLayer(this.departureArrivalLayer);
-    this.trekLayer = null;
-    this.departureArrivalLayer = null;
+    if (this.trekLayer) {
+      this.map.removeLayer(this.trekLayer);
+      this.trekLayer = null;
+    }
+    if (this.departureArrivalLayer) {
+      this.map.removeLayer(this.departureArrivalLayer);
+      this.departureArrivalLayer = null;
+    }
   }
   render() {
-    return index.h(index.Host, { style: { '--color-departure-icon': this.colorDepartureIcon, '--color-arrival-icon': this.colorArrivalIcon } });
+    return (index.h(index.Host, { style: {
+        '--color-primary': this.colorPrimary,
+        '--color-primary-tint': this.colorPrimaryTint,
+        '--color-departure-icon': this.colorDepartureIcon,
+        '--color-arrival-icon': this.colorArrivalIcon,
+      } }, !this.mapIsReady && (index.h("div", { class: "map-loader-container" }, index.h("span", { class: "loader" })))));
   }
   get element() { return index.getElement(this); }
 };
@@ -14526,41 +14573,65 @@ const GrwTrekCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.trekCardPress = index.createEvent(this, "trekCardPress", 7);
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
   }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
-    this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
-    this.route = state.routes.find(route => route.id === this.currentTrek.route);
-    this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+    if (this.currentTrek) {
+      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+      this.route = state.routes.find(route => route.id === this.currentTrek.route);
+      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+    }
+    onChange('currentTrek', () => {
+      this.currentTrek = this.trek ? this.trek : state.currentTrek;
+      if (this.currentTrek) {
+        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+        this.route = state.routes.find(route => route.id === this.currentTrek.route);
+        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+      }
+    });
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (index.h(index.Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id) }, index.h("div", { class: "trek-card-container" }, this.currentTrek.attachments[0] && index.h("img", { class: "image", src: this.currentTrek.attachments[0].url, loading: "lazy" }), index.h("div", { class: "sub-container" }, index.h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), index.h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }), index.h("div", { class: "icons-labels-container" }, index.h("div", { class: "row" }, index.h("div", { class: "icon-label difficulty" }, ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && index.h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
+    return (index.h(index.Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (index.h("div", { class: "trek-card-container" }, this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].url && (index.h("img", { class: "image", src: `${this.currentTrek.attachments[0].url}.400x0_q85.${this.currentTrek.attachments[0].url.slice(-3).toLowerCase()}`, loading: "lazy" })), index.h("div", { class: "sub-container" }, index.h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), index.h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }), index.h("div", { class: "icons-labels-container" }, index.h("div", { class: "row" }, index.h("div", { class: "icon-label difficulty" }, ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && index.h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
       _d.label), index.h("div", { class: "icon-label duration" }, index.h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration(this.currentTrek.duration)), index.h("div", { class: "icon-label route" }, ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && index.h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
       _f.route)), index.h("div", { class: "row" }, index.h("div", { class: "icon-label length" }, index.h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), index.h("div", { class: "icon-label ascent" }, index.h("div", { class: "svg-icon", innerHTML: ascentImage }), formatAscent(this.currentTrek.ascent)), index.h("div", { class: "icon-label practice" }, ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && index.h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
-      _h.name)))))));
+      _h.name))))))));
   }
 };
 GrwTrekCard.style = grwTrekCardCss;
 
-const grwTrekDetailCss = ".trek-detail-container{display:flex;flex-direction:column;max-height:calc(100vh - 64px);overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{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 .description{padding:0px 24px 24px 24px}";
+const grwTrekDetailCss = ".trek-detail-container{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{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 .description{padding:0px 24px 24px 24px}";
 
 const GrwTrekDetail = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
   }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
-    this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
-    this.route = state.routes.find(route => route.id === this.currentTrek.route);
-    this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+    if (this.currentTrek) {
+      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+      this.route = state.routes.find(route => route.id === this.currentTrek.route);
+      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+    }
+    onChange('currentTrek', () => {
+      this.currentTrek = this.trek ? this.trek : state.currentTrek;
+      if (this.currentTrek) {
+        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+        this.route = state.routes.find(route => route.id === this.currentTrek.route);
+        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+      }
+    });
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    return (index.h(index.Host, null, index.h("div", { class: "trek-detail-container" }, index.h("div", { class: "name" }, this.currentTrek.name), this.currentTrek.attachments[0] && index.h("img", { class: "image", src: this.currentTrek.attachments[0].url, 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 :
+    return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--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] && index.h("img", { class: "image", src: this.currentTrek.attachments[0].url, 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 :
       _b.label), index.h("div", { class: "icon-label duration" }, index.h("div", { class: "svg-icon", innerHTML: durationImage }), 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 :
       _e.route)), index.h("div", { class: "row" }, index.h("div", { class: "icon-label length" }, index.h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), index.h("div", { class: "icon-label ascent" }, index.h("div", { class: "svg-icon", innerHTML: ascentImage }), 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 :
-      _g.name)))), index.h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }))));
+      _g.name)))), index.h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser })))));
   }
 };
 GrwTrekDetail.style = grwTrekDetailCss;
@@ -14568,21 +14639,22 @@ GrwTrekDetail.style = grwTrekDetailCss;
 const GrwTrekProvider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    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() {
@@ -14593,18 +14665,22 @@ const GrwTrekProvider = class {
   }
 };
 
-const grwTreksListCss = ":host{display:flex;flex-wrap:wrap;justify-content:center;max-height:calc(100vh - 64px);overflow-y:auto}@media (min-width: 664px){:host{justify-content:space-between}}@media (min-width: 996px){:host{justify-content:flex-start}}grw-trek-card{margin:6px}";
+const grwTreksListCss = ":host{display:flex;flex-wrap:wrap;justify-content:space-around;height:100%;max-height:100vh;overflow-y:auto}grw-trek-card{margin:6px}";
 
 const GrwTreksList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.treksToDisplay = [];
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#d2b2c0';
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
   }
   componentWillLoad() {
-    this.treksToDisplay = state.treks.slice(0, this.step);
     this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+    onChange('treks', () => {
+      this.treksToDisplay = state.treks.slice(0, this.step);
+    });
   }
   handleInfiniteScroll(event) {
     if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
@@ -14617,7 +14693,7 @@ const GrwTreksList = class {
     }
   }
   render() {
-    return (index.h(index.Host, { class: "treks-list-container" }, this.treksToDisplay.map(trek => (index.h("grw-trek-card", { trek: trek })))));
+    return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (index.h("grw-trek-card", { trek: trek, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
   }
   get element() { return index.getElement(this); }
 };
@@ -14626,26 +14702,32 @@ GrwTreksList.style = grwTreksListCss;
 const GrwTreksProvider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    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() {

package/dist/cjs/{index-31255e29.js → index-c6f73e30.js}

@@ -815,6 +815,10 @@ const addHydratedFlag = (elm) => elm.classList.add('hydrated')
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
+        if (propType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string
@@ -831,6 +835,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -843,6 +848,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
@@ -855,6 +876,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 };
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -959,6 +983,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
                 Cstr.isProxied = true;
             }
@@ -982,6 +1012,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
             endNewInstance();
         }
         if (Cstr.style) {
@@ -1100,6 +1133,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-31255e29.js');
+const index = require('./index-c6f73e30.js');
 
 /*
  Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["grw-app_7.cjs",[[1,"grw-app",{"api":[1],"portals":[1],"appName":[1,"app-name"],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"showTrek":[32],"showMap":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-treks-list",{"treksToDisplay":[32]}],[0,"grw-map",{"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"]}],[1,"grw-trek-detail",{"trek":[16]}],[0,"grw-trek-provider",{"api":[1],"trekId":[1,"trek-id"]}],[0,"grw-treks-provider",{"api":[1],"portals":[1]}],[1,"grw-trek-card",{"trek":[16]}]]]], options);
+  return index.bootstrapLazy([["grw-app_7.cjs",[[1,"grw-app",{"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"showTrek":[32],"showMap":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"treksToDisplay":[32]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"mapIsReady":[32]}],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}]]]], options);
   });
 };
 

package/dist/collection/assets/departure-arrival.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style=";fill:none;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style=";fill:#ffffff;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>