@geotrekce/geotrek-rando-widget 0.4.7 → 0.5.0

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

@@ -0,0 +1,19 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--color-primary-container);
+  border-bottom-color: var(--color-on-primary-container);
+  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);
+  }
+}

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

@@ -0,0 +1,63 @@
+import { Host, h } from '@stencil/core';
+export class GrwLoader {
+  constructor() {
+    this.colorPrimaryContainer = '#eaddff';
+    this.colorOnPrimaryContainer = '#21005e';
+  }
+  render() {
+    return (h(Host, { style: { '--color-primary-container': this.colorPrimaryContainer, '--color-on-primary-container': this.colorOnPrimaryContainer } }, h("span", { class: "loader" })));
+  }
+  static get is() { return "grw-loader"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-loader.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-loader.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "colorPrimaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-primary-container",
+        "reflect": false,
+        "defaultValue": "'#eaddff'"
+      },
+      "colorOnPrimaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-primary-container",
+        "reflect": false,
+        "defaultValue": "'#21005e'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=grw-loader.js.map

package/dist/collection/components/grw-loader/grw-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grw-loader.js","sourceRoot":"","sources":["../../../src/components/grw-loader/grw-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;iCACY,SAAS;mCACP,SAAS;;EAE3C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,CAAC,qBAAqB,EAAE,8BAA8B,EAAE,IAAI,CAAC,uBAAuB,EAAE;MACpI,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACvB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'grw-loader',\n  styleUrl: 'grw-loader.scss',\n  shadow: true,\n})\nexport class GrwLoader {\n  @Prop() colorPrimaryContainer = '#eaddff';\n  @Prop() colorOnPrimaryContainer = '#21005e';\n\n  render() {\n    return (\n      <Host style={{ '--color-primary-container': this.colorPrimaryContainer, '--color-on-primary-container': this.colorOnPrimaryContainer }}>\n        <span class=\"loader\"></span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1140,7 +1140,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 #map {
   position: relative;
-  font-family: "Roboto";
+  font-family: var(--font-family);
   display: block;
 }
 
@@ -1471,8 +1471,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .trek-departure-popup img,
 .touristic-content-coordinates-popup img,
 .touristic-event-coordinates-popup img {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--border-radius, 8px);
+  border-top-right-radius: var(--border-radius, 8px);
 }
 .trek-departure-popup .trek-name,
 .trek-departure-popup .touristic-content-name,
@@ -1509,7 +1509,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background-color: var(--color-background);
   color: var(--color-on-surface);
   padding: 12px 24px;
-  border-radius: 20px;
+  border-radius: var(--border-radius, 20px);
   box-sizing: border-box;
   position: relative;
   gap: 8px;
@@ -1520,6 +1520,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   font-weight: 500;
   box-shadow: var(--elevation-1);
   transition: box-shadow 0.2s ease-in-out 0s;
+  font-family: var(--font-family);
 }
 
 .poi-tooltip .poi-name,
@@ -1559,7 +1560,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   align-items: center;
   background-color: #ffffff;
   padding: 8px;
-  border-radius: 8px;
+  border-radius: var(--border-radius, 8px);
   user-select: none;
 }
 .sensitiveAreasCheckboxContainer input,

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

@@ -21,6 +21,7 @@ export class GrwMap {
     this.attributionLayer = undefined;
     this.center = '1, 1';
     this.zoom = 10;
+    this.fontFamily = 'Roboto';
     this.colorPrimaryApp = '#6b0030';
     this.colorOnSurface = '#49454e';
     this.colorPrimaryContainer = '#eaddff';
@@ -135,6 +136,7 @@ export class GrwMap {
         value: L.tileLayer(urlLayer, {
           maxZoom: this.maxZoom,
           attribution: `${attributionLayers[index] && attributionLayers[index] !== '' ? attributionLayers[index].concat(' | ') : ''}Powered by <a target="_blank" href="https://geotrek.fr/">Geotrek</a>`,
+          crossOrigin: true,
         }),
       });
     });
@@ -350,7 +352,7 @@ export class GrwMap {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
             html: geoJsonPoint.properties.practice
-              ? `<div class="trek-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+              ? `<div class="trek-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.practice} /></div>`
               : `<div class="trek-marker-container"></div>`,
             className: 'trek-marker',
             iconSize: 32,
@@ -365,6 +367,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const trekImg = L.DomUtil.create('img');
               trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekImg.crossOrigin = 'anonymous';
               trekDeparturePopup.appendChild(trekImg);
             }
             const trekName = L.DomUtil.create('div');
@@ -516,7 +519,7 @@ export class GrwMap {
       this.currentPoisLayer = L.geoJSON(currentPoisFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img crossorigin="anonymous" src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'poi-icon',
             iconSize: 48,
           }),
@@ -553,7 +556,7 @@ export class GrwMap {
       this.currentToutisticContentsLayer = L.geoJSON(currentTouristicContentsFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.category_pictogram ? `<img src=${geoJsonPoint.properties.category_pictogram} />` : `<img />`,
+            html: geoJsonPoint.properties.category_pictogram ? `<img crossorigin="anonymous "src=${geoJsonPoint.properties.category_pictogram} />` : `<img />`,
             className: 'touristic-content-icon',
             iconSize: 48,
           }),
@@ -590,7 +593,10 @@ export class GrwMap {
       this.currentToutisticEventsLayer = L.geoJSON(currentTouristicEventsFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
+            html: geoJsonPoint.properties.type_pictogram
+              ? `
+            <img crossorigin="anonymous" src=${geoJsonPoint.properties.type_pictogram} />`
+              : `<img />`,
             className: 'touristic-event-icon',
             iconSize: 48,
           }),
@@ -626,7 +632,7 @@ export class GrwMap {
       this.currentInformationDesksLayer = L.geoJSON(currentInformationDesksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img crossorigin="anonymous" src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'information-desks-icon',
             iconSize: 48,
           }),
@@ -712,6 +718,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const trekImg = L.DomUtil.create('img');
               trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekImg.crossOrigin = 'anonymous';
               trekDeparturePopup.appendChild(trekImg);
             }
             const trekName = L.DomUtil.create('div');
@@ -841,7 +848,7 @@ export class GrwMap {
         zIndexOffset: 4000000,
         icon: L.divIcon({
           html: geoJsonPoint.properties.practice
-            ? `<div class="trek-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+            ? `<div class="trek-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.practice} /></div>`
             : `<div class="trek-marker-container"></div>`,
           className: 'selected-trek-marker',
           iconSize: 64,
@@ -856,6 +863,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const trekImg = L.DomUtil.create('img');
             trekImg.src = geoJsonPoint.properties.imgSrc;
+            trekImg.crossOrigin = 'anonymous';
             trekDeparturePopup.appendChild(trekImg);
           }
           const trekName = L.DomUtil.create('div');
@@ -935,6 +943,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const trekImg = L.DomUtil.create('img');
             trekImg.src = geoJsonPoint.properties.imgSrc;
+            trekImg.crossOrigin = 'anonymous';
             trekDeparturePopup.appendChild(trekImg);
           }
           const trekName = L.DomUtil.create('div');
@@ -1090,7 +1099,7 @@ export class GrwMap {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
             html: geoJsonPoint.properties.practice
-              ? `<div class="touristic-content-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+              ? `<div class="touristic-content-marker-container"><img crossorigin="anonymous "src=${geoJsonPoint.properties.practice} /></div>`
               : `<div class="touristic-content-marker-container"></div>`,
             className: 'touristic-content-marker',
             iconSize: 32,
@@ -1145,7 +1154,7 @@ export class GrwMap {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
             html: geoJsonPoint.properties.practice
-              ? `<div class="touristic-content-marker-container"><img src=${geoJsonPoint.properties.practice} /></div>`
+              ? `<div class="touristic-content-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.practice} /></div>`
               : `<div class="touristic-content-marker-container"></div>`,
             className: 'touristic-content-marker',
             iconSize: 32,
@@ -1160,6 +1169,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const touristicContentImg = L.DomUtil.create('img');
               touristicContentImg.src = geoJsonPoint.properties.imgSrc;
+              touristicContentImg.crossOrigin = 'anonymous';
               touristicContentCoordinatesPopup.appendChild(touristicContentImg);
             }
             const touristicContentName = L.DomUtil.create('div');
@@ -1239,7 +1249,7 @@ export class GrwMap {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
             html: geoJsonPoint.properties.type
-              ? `<div class="touristic-event-marker-container"><img src=${geoJsonPoint.properties.type} /></div>`
+              ? `<div class="touristic-event-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.type} /></div>`
               : `<div class="touristic-event-marker-container"></div>`,
             className: 'touristic-event-marker',
             iconSize: 32,
@@ -1285,7 +1295,7 @@ export class GrwMap {
         zIndexOffset: 4000000,
         icon: L.divIcon({
           html: geoJsonPoint.properties.category
-            ? `<div class="touristic-content-marker-container"><img src=${geoJsonPoint.properties.category} /></div>`
+            ? `<div class="touristic-content-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.category} /></div>`
             : `<div class="touristic-content-marker-container"></div>`,
           className: 'selected-touristic-content-marker',
           iconSize: 64,
@@ -1300,6 +1310,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const touristicContentImg = L.DomUtil.create('img');
             touristicContentImg.src = geoJsonPoint.properties.imgSrc;
+            touristicContentImg.crossOrigin = 'anonymous';
             touristicContentDeparturePopup.appendChild(touristicContentImg);
           }
           const touristicContentName = L.DomUtil.create('div');
@@ -1373,7 +1384,7 @@ export class GrwMap {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
             html: geoJsonPoint.properties.type
-              ? `<div class="touristic-event-marker-container"><img src=${geoJsonPoint.properties.type} /></div>`
+              ? `<div class="touristic-event-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.type} /></div>`
               : `<div class="touristic-event-marker-container"></div>`,
             className: 'touristic-event-marker',
             iconSize: 32,
@@ -1388,6 +1399,7 @@ export class GrwMap {
             if (geoJsonPoint.properties.imgSrc) {
               const touristicEventImg = L.DomUtil.create('img');
               touristicEventImg.src = geoJsonPoint.properties.imgSrc;
+              touristicEventImg.crossOrigin = 'anonymous';
               touristicEventCoordinatesPopup.appendChild(touristicEventImg);
             }
             const touristicEventName = L.DomUtil.create('div');
@@ -1472,7 +1484,7 @@ export class GrwMap {
         zIndexOffset: 4000000,
         icon: L.divIcon({
           html: geoJsonPoint.properties.category
-            ? `<div class="touristic-event-marker-container"><img src=${geoJsonPoint.properties.category} /></div>`
+            ? `<div class="touristic-event-marker-container"><img crossorigin="anonymous" src=${geoJsonPoint.properties.category} /></div>`
             : `<div class="touristic-event-marker-container"></div>`,
           className: 'selected-touristic-event-marker',
           iconSize: 64,
@@ -1487,6 +1499,7 @@ export class GrwMap {
           if (geoJsonPoint.properties.imgSrc) {
             const touristicEventImg = L.DomUtil.create('img');
             touristicEventImg.src = geoJsonPoint.properties.imgSrc;
+            touristicEventImg.crossOrigin = 'anonymous';
             touristicEventDeparturePopup.appendChild(touristicEventImg);
           }
           const touristicEventName = L.DomUtil.create('div');
@@ -1528,6 +1541,7 @@ export class GrwMap {
     const layersImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/layers.svg`);
     const contractImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/contract.svg`);
     return (h(Host, { style: {
+        '--font-family': this.fontFamily,
         '--color-primary-app': this.colorPrimaryApp,
         '--color-on-surface': this.colorOnSurface,
         '--color-primary-container': this.colorPrimaryContainer,
@@ -1641,6 +1655,24 @@ export class GrwMap {
         "reflect": false,
         "defaultValue": "10"
       },
+      "fontFamily": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "font-family",
+        "reflect": false,
+        "defaultValue": "'Roboto'"
+      },
       "colorPrimaryApp": {
         "type": "string",
         "mutable": false,