@geotrekce/geotrek-rando-widget 0.0.1 → 0.0.4

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

@@ -0,0 +1,53 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class GrwInformationDeskDetail {
+  render() {
+    return (h(Host, null,
+      this.informationDesk.photo_url && (h("div", { class: "information-desk-img" },
+        h("img", { src: this.informationDesk.photo_url, loading: "lazy" }))),
+      h("div", { class: "information-desk-right-container" },
+        this.informationDesk.name && h("div", { class: "information-desk-name" }, this.informationDesk.name),
+        this.informationDesk.description && h("div", { class: "information-desk-description", innerHTML: this.informationDesk.description }),
+        this.informationDesk.postal_code ||
+          this.informationDesk.municipality ||
+          (this.informationDesk.street && (h("div", null,
+            this.informationDesk.postal_code,
+            ` ${this.informationDesk.municipality}`,
+            ` ${this.informationDesk.street}`))),
+        this.informationDesk.phone && (h("div", null,
+          h("a", { href: `tel:${this.informationDesk.phone}` }, this.informationDesk.phone))),
+        this.informationDesk.email && (h("div", null,
+          h("a", { href: `mailto:${this.informationDesk.email}` }, this.informationDesk.email))),
+        this.informationDesk.website && (h("div", null,
+          h("a", { href: `${this.informationDesk.website}` }, this.informationDesk.website))))));
+  }
+  static get is() { return "grw-information-desk-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-information-desk-detail.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-information-desk-detail.css"]
+  }; }
+  static get properties() { return {
+    "informationDesk": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "InformationDesk",
+        "resolved": "{ id: number; name: string; description: string; type: InformationDeskType; phone: string; email: string; website: string; municipality: string; postal_code: string; street: string; photo_url: string; latitude: string; longitude: string; }",
+        "references": {
+          "InformationDesk": {
+            "location": "import",
+            "path": "types/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

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

@@ -657,8 +657,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 
 grw-map {
+  font-family: "Roboto";
   display: block;
   height: 100%;
+  max-height: 100vh;
 }
 
 .departure-icon svg,
@@ -683,4 +685,119 @@ grw-map {
 .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);
+  }
+}
+
+.leaflet-popup-content {
+  width: 144px;
+  margin: 0;
+}
+
+.trek-departure-popup {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  height: auto;
+  padding: 24px;
+}
+.trek-departure-popup img {
+  border-radius: 8px;
+  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
+}
+.trek-departure-popup .trek-name {
+  color: var(--color-primary);
+  font-weight: bold;
+  font-size: 12px;
+}
+.trek-departure-popup .trek-name-margin-top {
+  margin-top: 12px;
+}
+
+.poi-tooltip .poi-name,
+.poi-tooltip .information-desks-name,
+.information-desks-tooltip .poi-name,
+.information-desks-tooltip .information-desks-name {
+  color: var(--color-primary);
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.sensitiveAreasCheckboxContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff;
+  padding: 8px;
+  border-radius: 8px;
+  user-select: none;
+}
+.sensitiveAreasCheckboxContainer input,
+.sensitiveAreasCheckboxContainer label {
+  cursor: pointer;
+}
+.sensitiveAreasCheckboxContainer input {
+  margin: 0;
+}
+.sensitiveAreasCheckboxContainer label {
+  padding-left: 8px;
+}
+
+.poi-icon,
+.information-desks-icon {
+  background-color: var(--color-poi-icon);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.poi-icon img,
+.information-desks-icon img {
+  width: 36px !important;
+}
+
+.parking-icon {
+  background-color: #0000ff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  color: #ffffff;
 }