@geotrekce/geotrek-rando-widget 0.0.2 → 0.0.5

package/dist/cjs/grw-information-desk-detail_3.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c2c4531d.js');
+const store = require('./store-972b8d2a.js');
+
+const grwInformationDeskDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.information-desk-img{width:180px}.information-desk-img img{width:180px;border-radius:8px}.information-desk-sub-container{display:flex;flex-direction:column}.information-desk-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.information-desk-description{font-size:16px}";
+
+const GrwInformationDeskDetail = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, this.informationDesk.photo_url && (index.h("div", { class: "information-desk-img" }, index.h("img", { src: this.informationDesk.photo_url, loading: "lazy" }))), index.h("div", { class: "information-desk-sub-container" }, this.informationDesk.name && index.h("div", { class: "information-desk-name" }, this.informationDesk.name), this.informationDesk.description && index.h("div", { class: "information-desk-description", innerHTML: this.informationDesk.description }), this.informationDesk.postal_code ||
+      this.informationDesk.municipality ||
+      (this.informationDesk.street && (index.h("div", null, this.informationDesk.postal_code, ` ${this.informationDesk.municipality}`, ` ${this.informationDesk.street}`))), this.informationDesk.phone && (index.h("div", null, index.h("a", { href: `tel:${this.informationDesk.phone}` }, this.informationDesk.phone))), this.informationDesk.email && (index.h("div", null, index.h("a", { href: `mailto:${this.informationDesk.email}` }, this.informationDesk.email))), this.informationDesk.website && (index.h("div", null, index.h("a", { href: `${this.informationDesk.website}` }, this.informationDesk.website))))));
+  }
+};
+GrwInformationDeskDetail.style = grwInformationDeskDetailCss;
+
+const grwPoiDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.poi-img{width:180px}.poi-img img{width:180px;border-radius:8px}.poi-sub-container{display:flex;flex-direction:column}.poi-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.poi-description{font-size:16px}";
+
+const GrwPoiDetail = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, this.poi.attachments && this.poi.attachments[0] && this.poi.attachments[0].thumbnail && (index.h("div", { class: "poi-img" }, index.h("img", { src: this.poi.attachments[0].thumbnail, loading: "lazy" }))), index.h("div", { class: "poi-sub-container" }, index.h("div", { class: "poi-name" }, this.poi.name), index.h("div", { class: "poi-description", innerHTML: this.poi.description }))));
+  }
+};
+GrwPoiDetail.style = grwPoiDetailCss;
+
+const grwSensitiveAreaDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.sensitive-area-title{color:var(--color-primary);font-size:24px;padding:12px 0px}.sensitive-area-description{font-size:16px}.sensitive-area-period-container .sensitive-area-period-title,.sensitive-area-period-container .sensitive-area-practice-title,.sensitive-area-period-container .sensitive-area-contact-title,.sensitive-area-practice-container .sensitive-area-period-title,.sensitive-area-practice-container .sensitive-area-practice-title,.sensitive-area-practice-container .sensitive-area-contact-title,.sensitive-area-contact-container .sensitive-area-period-title,.sensitive-area-contact-container .sensitive-area-practice-title,.sensitive-area-contact-container .sensitive-area-contact-title{color:var(--color-primary);font-size:24px;padding:12px 0px}.sensitive-area-period-container .sensitive-area-period-values,.sensitive-area-period-container .sensitive-area-practice-values,.sensitive-area-practice-container .sensitive-area-period-values,.sensitive-area-practice-container .sensitive-area-practice-values,.sensitive-area-contact-container .sensitive-area-period-values,.sensitive-area-contact-container .sensitive-area-practice-values{display:flex}";
+
+const GrwSensitiveAreaDetail = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "sensitive-area-title" }, this.sensitiveArea.name), index.h("div", { class: "sensitive-area-description", innerHTML: this.sensitiveArea.description }), this.sensitiveArea.practices && this.sensitiveArea.practices.length > 0 && (index.h("div", { class: "sensitive-area-practice-container" }, index.h("div", { class: "sensitive-area-practice-title" }, "Domaines d'activit\u00E9s concern\u00E9s :"), index.h("div", { class: "sensitive-area-practice-values" }, this.sensitiveArea.practices.map((practice, index$1) => (index.h("div", { innerHTML: `${store.state.practices.find(statePractice => statePractice.id === practice).name.toUpperCase()}${index$1 + 1 !== this.sensitiveArea.practices.length ? ' - ' : ''}` })))))), this.sensitiveArea.period && this.sensitiveArea.period.length > 0 && (index.h("div", { class: "sensitive-area-period-container" }, index.h("div", { class: "sensitive-area-period-title" }, "P\u00E9riodes de sensibilit\u00E9"), index.h("div", { class: "sensitive-area-period-values" }, this.sensitiveArea.period.map((month, index$1) => {
+      if (month) {
+        return (index.h("div", { innerHTML: `${new Date(0, index$1 + 1, 0).toLocaleDateString('fr', { month: 'long' }).toUpperCase()}${this.sensitiveArea.period.slice(index$1 + 1).find(month => month) ? ' - ' : ''}` }));
+      }
+    })))), index.h("div", { class: "sensitive-area-contact-container" }, index.h("div", { class: "sensitive-area-contact-title" }, "Contact"), index.h("div", { innerHTML: this.sensitiveArea.contact, class: "sensitive-area-contact-value" }))));
+  }
+};
+GrwSensitiveAreaDetail.style = grwSensitiveAreaDetailCss;
+
+exports.grw_information_desk_detail = GrwInformationDeskDetail;
+exports.grw_poi_detail = GrwPoiDetail;
+exports.grw_sensitive_area_detail = GrwSensitiveAreaDetail;

package/dist/cjs/grw-trek-card.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c2c4531d.js');
+const store = require('./store-972b8d2a.js');
+const length = require('./length-d315d156.js');
+
+const grwTrekCardCss = ".trek-card-container,.trek-card-large-view-container{font-family:\"Roboto\";border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image,.trek-card-large-view-container .image{object-fit:cover}.trek-card-container .sub-container,.trek-card-large-view-container .sub-container{display:flex;flex-direction:column;justify-content:center;padding:12px}.trek-card-container .sub-container .name,.trek-card-large-view-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:8px}.trek-card-container .sub-container .departure,.trek-card-large-view-container .sub-container .departure{color:rgba(0, 0, 0, 0.7);font-size:16px;margin:4px 0px}.trek-card-container .sub-container .themes-container,.trek-card-large-view-container .sub-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .themes-container .theme,.trek-card-large-view-container .sub-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-card-container .sub-container .icons-labels-container,.trek-card-large-view-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .icons-labels-container .row,.trek-card-large-view-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-card-container .sub-container .icons-labels-container .row:not(:last-child),.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label{display:flex;align-items:center;width:50%}.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 4px}.trek-card-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:8px}.trek-card-container .sub-container .icons-labels-container .row .practice img,.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-card-container{width:350px;height:auto}.trek-card-container .image{width:100%}.trek-card-large-view-container{height:auto;display:flex;flex-direction:row}.trek-card-large-view-container .image{width:250px}";
+
+const GrwTrekCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.trekCardPress = index.createEvent(this, "trekCardPress", 7);
+    this.colorPrimary = '#6b0030';
+    this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
+  }
+  componentWillLoad() {
+    this.currentTrek = this.trek ? this.trek : store.state.currentTrek;
+    if (this.currentTrek) {
+      this.difficulty = store.state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+      this.route = store.state.routes.find(route => route.id === this.currentTrek.route);
+      this.practice = store.state.practices.find(practice => practice.id === this.currentTrek.practice);
+      this.themes = store.state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
+    }
+    store.onChange('currentTrek', () => {
+      this.currentTrek = this.trek ? this.trek : store.state.currentTrek;
+      if (this.currentTrek) {
+        this.difficulty = store.state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
+        this.route = store.state.routes.find(route => route.id === this.currentTrek.route);
+        this.practice = store.state.practices.find(practice => practice.id === this.currentTrek.practice);
+        this.themes = store.state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
+      }
+    });
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (index.h(index.Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { 'width': this.isLargeView ? '100%' : 'auto', '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (index.h("div", { class: this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container' }, 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: "departure" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.departure), index.h("div", { class: "name" }, (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.name), index.h("div", { class: "themes-container" }, this.themes.map(theme => (index.h("div", { class: "theme" }, theme.label)))), 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: length.durationImage }), length.formatDuration(this.currentTrek.duration))), 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: "row" }, 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: "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))))))));
+  }
+};
+GrwTrekCard.style = grwTrekCardCss;
+
+exports.grw_trek_card = GrwTrekCard;

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

@@ -189,6 +189,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -216,6 +217,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -233,6 +238,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 const newVNode = (tag, text) => {
@@ -246,6 +254,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -294,6 +305,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -458,6 +471,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -465,6 +480,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // Vnode might have been moved left
@@ -502,7 +518,29 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // createKeyToOldIdx
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // new element
                 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
                 newStartVnode = newCh[++newStartIdx];
@@ -525,7 +563,9 @@ const isSameVnode = (vnode1, vnode2) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (vnode1.$tag$ === vnode2.$tag$) {
-        return true;
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
     }
     return false;
 };
@@ -815,6 +855,11 @@ 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 & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
         if (propType & 2 /* Number */) {
             // force it to be a number
             return parseFloat(propValue);

package/dist/cjs/length-d315d156.js

@@ -0,0 +1,34 @@
+'use strict';
+
+function formatDuration(duration) {
+  let formattedDuration;
+  if (duration < 24) {
+    formattedDuration = `${Math.floor(duration)}h`;
+    if (duration % 1 > 0) {
+      formattedDuration += `${Math.round(60 * (duration % 1))}min`;
+    }
+  }
+  else {
+    formattedDuration = `${duration / 24}j`;
+  }
+  return formattedDuration;
+}
+function formatLength(length) {
+  return `${Math.round(length / 1000)}km`;
+}
+function formatAscent(ascent) {
+  return `${ascent}m`;
+}
+
+const ascentImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="352 144 464 144 464 256" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M48,368,169.37,246.63a32,32,0,0,1,45.26,0l50.74,50.74a32,32,0,0,0,45.26,0L448,160" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`;
+
+const durationImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M145.61,464H366.39c19.8,0,35.55-16.29,33.42-35.06C386.06,308,304,310,304,256s83.11-51,95.8-172.94c2-18.78-13.61-35.06-33.41-35.06H145.61c-19.8,0-35.37,16.28-33.41,35.06C124.89,205,208,201,208,256s-82.06,52-95.8,172.94C110.06,447.71,125.81,464,145.61,464Z" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M343.3,432H169.13c-15.6,0-20-18-9.06-29.16C186.55,376,240,356.78,240,326V224c0-19.85-38-35-61.51-67.2-3.88-5.31-3.49-12.8,6.37-12.8H327.59c8.41,0,10.23,7.43,6.4,12.75C310.82,189,272,204.05,272,224V326c0,30.53,55.71,47,80.4,76.87C362.35,414.91,358.87,432,343.3,432Z"/></svg>`;
+
+const lengthImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="304 96 416 96 416 208" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="405.77" y1="106.2" x2="111.98" y2="400.02" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="208 416 96 416 96 304" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`;
+
+exports.ascentImage = ascentImage;
+exports.durationImage = durationImage;
+exports.formatAscent = formatAscent;
+exports.formatDuration = formatDuration;
+exports.formatLength = formatLength;
+exports.lengthImage = lengthImage;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f73e30.js');
+const index = require('./index-c2c4531d.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],"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);
+  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);
   });
 };
 

package/dist/cjs/store-972b8d2a.js

@@ -0,0 +1,209 @@
+'use strict';
+
+const index = require('./index-c2c4531d.js');
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof index.getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = index.getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(defaultState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        const unReset = on('reset', () => cb(defaultState[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const { state, onChange } = createStore({
+  api: '',
+  treks: [],
+  currentTreks: [],
+  difficulties: [],
+  routes: [],
+  practices: [],
+  themes: [],
+  durations: [],
+  currentSensitiveAreas: null,
+  labels: null,
+  sources: null,
+  accessibilities: null,
+  accessibilitiesLevel: null,
+  currentTrek: null,
+  currentPois: null,
+  currentInformationDesks: null,
+});
+
+exports.onChange = onChange;
+exports.state = state;

package/dist/collection/collection-manifest.json

@@ -1,7 +1,11 @@
 {
   "entries": [
     "./components/grw-app/grw-app.js",
+    "./components/grw-filter/grw-filter.js",
+    "./components/grw-information-desk-detail/grw-information-desk-detail.js",
     "./components/grw-map/grw-map.js",
+    "./components/grw-poi-detail/grw-poi-detail.js",
+    "./components/grw-sensitive-area-detail/grw-sensitive-area-detail.js",
     "./components/grw-trek-card/grw-trek-card.js",
     "./components/grw-trek-detail/grw-trek-detail.js",
     "./components/grw-treks-list/grw-treks-list.js",

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

@@ -2,6 +2,7 @@
   position: relative;
   height: 100%;
   max-height: 100vh;
+  font-family: "Roboto";
 }
 
 .header-container,
@@ -11,11 +12,6 @@
   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;
@@ -28,6 +24,75 @@
   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 {