@geotrekce/geotrek-rando-widget 0.3.6 → 0.4.0

package/dist/collection/components/grw-touristic-event-detail/grw-touristic-event-detail.js

@@ -0,0 +1,242 @@
+import { Build, Host, getAssetPath, h } from '@stencil/core';
+import { translate } from 'i18n/i18n';
+import state from 'store/store';
+import Swiper, { FreeMode, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper';
+export class GrwTouristicEventDetail {
+  constructor() {
+    this.displayFullscreen = false;
+    this.colorPrimaryApp = '#6b0030';
+    this.colorOnSurface = '#49454e';
+    this.colorPrimaryContainer = '#eaddff';
+    this.colorOnPrimaryContainer = '#21005e';
+    this.colorSecondaryContainer = '#e8def8';
+    this.colorOnSecondaryContainer = '#1d192b';
+    this.colorSurfaceContainerLow = '#f7f2fa';
+    this.colorBackground = '#fef7ff';
+    this.isLargeView = false;
+  }
+  componentDidLoad() {
+    this.swiperImages = new Swiper(this.swiperImagesRef, {
+      modules: [Navigation, Pagination, Keyboard, FreeMode, Mousewheel],
+      navigation: {
+        prevEl: this.prevElImagesRef,
+        nextEl: this.nextElImagesRef,
+      },
+      pagination: { el: this.paginationElImagesRef },
+      allowTouchMove: false,
+      keyboard: false,
+    });
+    this.swiperImagesRef.onfullscreenchange = () => {
+      this.displayFullscreen = !this.displayFullscreen;
+      this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
+    };
+  }
+  handleFullscreen() {
+    if (state.currentTouristicEvent.attachments && state.currentTouristicEvent.attachments[0] && state.currentTouristicEvent.attachments[0].url) {
+      this.swiperImagesRef.requestFullscreen();
+    }
+  }
+  render() {
+    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
+    const touristicEventType = state.touristicEventTypes &&
+      state.currentTouristicEvent &&
+      state.touristicEventTypes.find(touristicEventCategory => touristicEventCategory.id === state.currentTouristicEvent.type);
+    const cities = state.currentTouristicEvent && state.currentTouristicEvent.cities.map(currentCity => { var _a; return (_a = state.cities.find(city => city.id === currentCity)) === null || _a === void 0 ? void 0 : _a.name; });
+    return (h(Host, { style: {
+        '--color-primary-app': this.colorPrimaryApp,
+        '--color-on-surface': this.colorOnSurface,
+        '--color-primary-container': this.colorPrimaryContainer,
+        '--color-on-primary-container': this.colorOnPrimaryContainer,
+        '--color-secondary-container': this.colorSecondaryContainer,
+        '--color-on-secondary-container': this.colorOnSecondaryContainer,
+        '--color-background': this.colorBackground,
+        '--detail-bottom-space-height': this.isLargeView ? '8px' : '104px',
+      } }, state.currentTouristicEvent && (h("div", { class: "touristic-event-detail-container", ref: el => (this.touristicEventDetailContainerRef = el) }, h("div", { class: "images-container", ref: el => (this.presentationRef = el) }, h("div", { class: "swiper swiper-images", ref: el => (this.swiperImagesRef = el) }, h("div", { class: "swiper-wrapper" }, state.currentTouristicEvent.attachments.length > 0 ? (state.currentTouristicEvent.attachments
+      .filter(attachment => attachment.type === 'image')
+      .map(attachment => (h("div", { class: "swiper-slide" }, h("img", { class: "image", src: attachment.url, loading: "lazy", onClick: () => this.handleFullscreen() }))))) : (h("div", { class: "swiper-slide" }, h("img", { class: "default-poi-img", src: defaultImageSrc, loading: "lazy" })))), h("div", { class: "swiper-pagination", ref: el => (this.paginationElImagesRef = el) }), h("div", { class: "swiper-button-prev", ref: el => (this.prevElImagesRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.nextElImagesRef = el) }))), h("div", { class: "touristic-event-category-container" }, h("img", { src: touristicEventType.pictogram }), h("div", { class: "touristic-event-category-name" }, touristicEventType.type)), h("div", { class: "name" }, state.currentTouristicEvent.name), h("div", { class: "divider" }), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, translate[state.language].download), h("div", { class: "links-container" }, h("a", { href: `${state.currentTouristicEvent.pdf}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "PDF"))), state.currentTouristicEvent.description_teaser && (h("div", null, h("div", { class: "divider" }), h("div", { class: "description-teaser", innerHTML: state.currentTouristicEvent.description_teaser }))), h("div", { class: "divider" }), state.currentTouristicEvent.practical_info && (h("div", { class: "description-container", ref: el => (this.descriptionRef = el) }, h("div", { class: "description-title" }, translate[state.language].description), h("div", { class: "description", innerHTML: state.currentTouristicEvent.description }))), cities && cities.length > 0 && (h("div", { class: "cities-container" }, h("div", { class: "cities-title" }, translate[state.language].city, " :\u00A0"), h("div", { innerHTML: cities.join(', ') }))), state.currentTouristicEvent.practical_info && (h("div", null, h("div", { class: "divider" }), h("div", { class: "useful-information-container" }, h("div", { class: "useful-information-title" }, translate[state.language].usefulInformation, " :\u00A0"), h("div", { innerHTML: state.currentTouristicEvent.practical_info })))), (state.currentTouristicEvent.contact || state.currentTouristicEvent.email || state.currentTouristicEvent.website) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "contact-container" }, h("div", { class: "contact-title" }, translate[state.language].contact, " :\u00A0"), state.currentTouristicEvent.contact && h("div", { innerHTML: state.currentTouristicEvent.contact }), state.currentTouristicEvent.email && (h("div", { class: "email-container" }, h("div", null, translate[state.language].email, " :\u00A0"), h("div", { innerHTML: state.currentTouristicEvent.email }))), state.currentTouristicEvent.website && (h("div", { class: "website-container" }, h("div", null, translate[state.language].website, " :\u00A0"), h("div", { innerHTML: state.currentTouristicEvent.website })))))), h("div", { class: "detail-bottom-space" })))));
+  }
+  static get is() { return "grw-touristic-event-detail"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["grw-touristic-event-detail.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["grw-touristic-event-detail.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "colorPrimaryApp": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-primary-app",
+        "reflect": false,
+        "defaultValue": "'#6b0030'"
+      },
+      "colorOnSurface": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-surface",
+        "reflect": false,
+        "defaultValue": "'#49454e'"
+      },
+      "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'"
+      },
+      "colorSecondaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-secondary-container",
+        "reflect": false,
+        "defaultValue": "'#e8def8'"
+      },
+      "colorOnSecondaryContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-on-secondary-container",
+        "reflect": false,
+        "defaultValue": "'#1d192b'"
+      },
+      "colorSurfaceContainerLow": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-surface-container-low",
+        "reflect": false,
+        "defaultValue": "'#f7f2fa'"
+      },
+      "colorBackground": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color-background",
+        "reflect": false,
+        "defaultValue": "'#fef7ff'"
+      },
+      "isLargeView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-large-view",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "displayFullscreen": {}
+    };
+  }
+}
+//# sourceMappingURL=grw-touristic-event-detail.js.map

package/dist/collection/components/grw-touristic-event-detail/grw-touristic-event-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grw-touristic-event-detail.js","sourceRoot":"","sources":["../../../src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Host, Prop, State, getAssetPath, h } from '@stencil/core';\nimport { translate } from 'i18n/i18n';\nimport state from 'store/store';\nimport Swiper, { FreeMode, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper';\n\n@Component({\n  tag: 'grw-touristic-event-detail',\n  styleUrl: 'grw-touristic-event-detail.scss',\n  shadow: true,\n})\nexport class GrwTouristicEventDetail {\n  swiperImages?: Swiper;\n  swiperImagesRef?: HTMLDivElement;\n  prevElImagesRef?: HTMLDivElement;\n  nextElImagesRef?: HTMLDivElement;\n  paginationElImagesRef?: HTMLDivElement;\n  presentationRef?: HTMLDivElement;\n\n  @State() displayFullscreen = false;\n  @Prop() colorPrimaryApp = '#6b0030';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorPrimaryContainer = '#eaddff';\n  @Prop() colorOnPrimaryContainer = '#21005e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n  @Prop() colorBackground = '#fef7ff';\n  @Prop() isLargeView = false;\n\n  descriptionRef?: HTMLDivElement;\n  touristicEventDetailContainerRef?: HTMLElement;\n\n  componentDidLoad() {\n    this.swiperImages = new Swiper(this.swiperImagesRef, {\n      modules: [Navigation, Pagination, Keyboard, FreeMode, Mousewheel],\n      navigation: {\n        prevEl: this.prevElImagesRef,\n        nextEl: this.nextElImagesRef,\n      },\n      pagination: { el: this.paginationElImagesRef },\n      allowTouchMove: false,\n      keyboard: false,\n    });\n    this.swiperImagesRef.onfullscreenchange = () => {\n      this.displayFullscreen = !this.displayFullscreen;\n      this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();\n    };\n  }\n\n  handleFullscreen() {\n    if (state.currentTouristicEvent.attachments && state.currentTouristicEvent.attachments[0] && state.currentTouristicEvent.attachments[0].url) {\n      this.swiperImagesRef.requestFullscreen();\n    }\n  }\n\n  render() {\n    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);\n    const touristicEventType =\n      state.touristicEventTypes &&\n      state.currentTouristicEvent &&\n      state.touristicEventTypes.find(touristicEventCategory => touristicEventCategory.id === state.currentTouristicEvent.type);\n    const cities = state.currentTouristicEvent && state.currentTouristicEvent.cities.map(currentCity => state.cities.find(city => city.id === currentCity)?.name);\n    return (\n      <Host\n        style={{\n          '--color-primary-app': this.colorPrimaryApp,\n          '--color-on-surface': this.colorOnSurface,\n          '--color-primary-container': this.colorPrimaryContainer,\n          '--color-on-primary-container': this.colorOnPrimaryContainer,\n          '--color-secondary-container': this.colorSecondaryContainer,\n          '--color-on-secondary-container': this.colorOnSecondaryContainer,\n          '--color-background': this.colorBackground,\n          '--detail-bottom-space-height': this.isLargeView ? '8px' : '104px',\n        }}\n      >\n        {state.currentTouristicEvent && (\n          <div class=\"touristic-event-detail-container\" ref={el => (this.touristicEventDetailContainerRef = el)}>\n            <div class=\"images-container\" ref={el => (this.presentationRef = el)}>\n              <div class=\"swiper swiper-images\" ref={el => (this.swiperImagesRef = el)}>\n                <div class=\"swiper-wrapper\">\n                  {state.currentTouristicEvent.attachments.length > 0 ? (\n                    state.currentTouristicEvent.attachments\n                      .filter(attachment => attachment.type === 'image')\n                      .map(attachment => (\n                        <div class=\"swiper-slide\">\n                          <img class=\"image\" src={attachment.url} loading=\"lazy\" onClick={() => this.handleFullscreen()} />\n                        </div>\n                      ))\n                  ) : (\n                    <div class=\"swiper-slide\">\n                      <img class=\"default-poi-img\" src={defaultImageSrc} loading=\"lazy\" />\n                    </div>\n                  )}\n                </div>\n                <div class=\"swiper-pagination\" ref={el => (this.paginationElImagesRef = el)}></div>\n                <div class=\"swiper-button-prev\" ref={el => (this.prevElImagesRef = el)}></div>\n                <div class=\"swiper-button-next\" ref={el => (this.nextElImagesRef = el)}></div>\n              </div>\n            </div>\n            <div class=\"touristic-event-category-container\">\n              <img src={touristicEventType.pictogram} />\n              <div class=\"touristic-event-category-name\">{touristicEventType.type}</div>\n            </div>\n            <div class=\"name\">{state.currentTouristicEvent.name}</div>\n            <div class=\"divider\"></div>\n            <div class=\"downloads-container\">\n              <div class=\"download-title\">{translate[state.language].download}</div>\n              <div class=\"links-container\">\n                <a href={`${state.currentTouristicEvent.pdf}`}>\n                  {/* @ts-ignore */}\n                  <span translate={false} class=\"material-symbols material-symbols-outlined\">\n                    download\n                  </span>\n                  PDF\n                </a>\n              </div>\n            </div>\n            {state.currentTouristicEvent.description_teaser && (\n              <div>\n                <div class=\"divider\"></div>\n                <div class=\"description-teaser\" innerHTML={state.currentTouristicEvent.description_teaser}></div>\n              </div>\n            )}\n            <div class=\"divider\"></div>\n            {state.currentTouristicEvent.practical_info && (\n              <div class=\"description-container\" ref={el => (this.descriptionRef = el)}>\n                <div class=\"description-title\">{translate[state.language].description}</div>\n                <div class=\"description\" innerHTML={state.currentTouristicEvent.description}></div>\n              </div>\n            )}\n            {cities && cities.length > 0 && (\n              <div class=\"cities-container\">\n                <div class=\"cities-title\">{translate[state.language].city} :&nbsp;</div>\n                <div innerHTML={cities.join(', ')}></div>\n              </div>\n            )}\n            {state.currentTouristicEvent.practical_info && (\n              <div>\n                <div class=\"divider\"></div>\n                <div class=\"useful-information-container\">\n                  <div class=\"useful-information-title\">{translate[state.language].usefulInformation} :&nbsp;</div>\n                  <div innerHTML={state.currentTouristicEvent.practical_info}></div>\n                </div>\n              </div>\n            )}\n            {(state.currentTouristicEvent.contact || state.currentTouristicEvent.email || state.currentTouristicEvent.website) && (\n              <div>\n                <div class=\"divider\"></div>\n\n                <div class=\"contact-container\">\n                  <div class=\"contact-title\">{translate[state.language].contact} :&nbsp;</div>\n                  {state.currentTouristicEvent.contact && <div innerHTML={state.currentTouristicEvent.contact}></div>}\n                  {state.currentTouristicEvent.email && (\n                    <div class=\"email-container\">\n                      <div>{translate[state.language].email} :&nbsp;</div>\n                      <div innerHTML={state.currentTouristicEvent.email}></div>\n                    </div>\n                  )}\n                  {state.currentTouristicEvent.website && (\n                    <div class=\"website-container\">\n                      <div>{translate[state.language].website} :&nbsp;</div>\n                      <div innerHTML={state.currentTouristicEvent.website}></div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n            <div class=\"detail-bottom-space\"></div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/grw-trek-card/grw-trek-card.css

@@ -131,6 +131,7 @@
 }
 
 .trek-card-large-view-container {
+  width: 100%;
   display: flex;
   flex-direction: row;
 }

package/dist/collection/components/grw-trek-detail/grw-trek-detail.css

@@ -619,6 +619,10 @@ grw-trek-detail {
   width: 240px;
   background-size: 120px 100%;
 }
+.trek-options .touristic-event.selected-trek-option ~ .indicator-selected-trek-option {
+  width: 240px;
+  background-size: 120px 100%;
+}
 .trek-options .presentation {
   min-width: 120px;
   width: 120px;
@@ -651,6 +655,10 @@ grw-trek-detail {
   min-width: 120px;
   width: 120px;
 }
+.trek-options .touristic-event {
+  min-width: 120px;
+  width: 120px;
+}
 
 .trek-detail-container {
   font-family: "Roboto";
@@ -813,7 +821,8 @@ grw-trek-detail {
 .trek-detail-container .weather-container,
 .trek-detail-container .parent-trek-container,
 .trek-detail-container .step-container,
-.trek-detail-container .touristic-content-container {
+.trek-detail-container .touristic-content-container,
+.trek-detail-container .touristic-event-container {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
@@ -835,7 +844,8 @@ grw-trek-detail {
 .trek-detail-container .weather-container a,
 .trek-detail-container .parent-trek-container a,
 .trek-detail-container .step-container a,
-.trek-detail-container .touristic-content-container a {
+.trek-detail-container .touristic-content-container a,
+.trek-detail-container .touristic-event-container a {
   color: var(--color-primary-app);
 }
 .trek-detail-container .description-title,
@@ -852,7 +862,8 @@ grw-trek-detail {
 .trek-detail-container .accessibilities-title,
 .trek-detail-container .step-title,
 .trek-detail-container .parent-trek-title,
-.trek-detail-container .touristic-content-title {
+.trek-detail-container .touristic-content-title,
+.trek-detail-container .touristic-event-title {
   color: var(--color-on-surface);
   font-size: 22px;
   line-height: 28px;
@@ -872,7 +883,8 @@ grw-trek-detail {
 .trek-detail-container .source-title,
 .trek-detail-container .accessibilities-title,
 .trek-detail-container .parent-trek-title,
-.trek-detail-container .touristic-content-title {
+.trek-detail-container .touristic-content-title,
+.trek-detail-container .touristic-event-title {
   margin-bottom: 16px;
 }
 .trek-detail-container .step-title {
@@ -881,7 +893,8 @@ grw-trek-detail {
 .trek-detail-container .information-desks-title,
 .trek-detail-container .pois-title,
 .trek-detail-container .step-title,
-.trek-detail-container .touristic-content-title {
+.trek-detail-container .touristic-content-title,
+.trek-detail-container .touristic-event-title {
   padding: 0px 24px 0px 24px;
 }
 .trek-detail-container .parent-trek-title {
@@ -1056,7 +1069,8 @@ grw-trek-detail {
 .swiper-information-desks,
 .swiper-pois,
 .swiper-step,
-.swiper-touristic-content {
+.swiper-touristic-content,
+.swiper-touristic-event {
   padding-right: 32px;
   padding-left: 32px;
 }

package/dist/collection/components/grw-trek-detail/grw-trek-detail.js

@@ -43,6 +43,11 @@ const touristicContents = {
   width: 120,
   indicator: false,
 };
+const touristicEvents = {
+  visible: false,
+  width: 120,
+  indicator: false,
+};
 const options = {
   presentation,
   steps,
@@ -52,6 +57,7 @@ const options = {
   informationPlaces,
   pois,
   touristicContents,
+  touristicEvents,
 };
 export class GrwTrekDetail {
   constructor() {
@@ -151,6 +157,20 @@ export class GrwTrekDetail {
         },
       },
     });
+    this.swiperTouristicEvents = new Swiper(this.swiperTouristicEventsRef, {
+      modules: [FreeMode, Mousewheel],
+      slidesPerView: 1.5,
+      spaceBetween: 20,
+      grabCursor: true,
+      freeMode: true,
+      mousewheel: { forceToAxis: true },
+      breakpointsBase: 'container',
+      breakpoints: {
+        '540': {
+          slidesPerView: 2.5,
+        },
+      },
+    });
     if (this.presentationRef) {
       const presentationObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
@@ -236,6 +256,16 @@ export class GrwTrekDetail {
       });
       touristicContentObserver.observe(this.touristicContentsRef);
     }
+    if (this.touristicEventsRef) {
+      const touristicEventObserver = new IntersectionObserver(entries => {
+        const isIntersecting = entries[0].isIntersecting;
+        this.touristicEventsIsInViewport.emit(isIntersecting);
+        if (isIntersecting) {
+          this.options = Object.assign(Object.assign({}, this.defaultOptions), { touristicEvents: Object.assign(Object.assign({}, this.defaultOptions.touristicEvents), { indicator: isIntersecting }) });
+        }
+      });
+      touristicEventObserver.observe(this.touristicContentsRef);
+    }
   }
   connectedCallback() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -282,7 +312,7 @@ export class GrwTrekDetail {
   }
   handleOptions() {
     return Object.assign(Object.assign({}, options), { presentation: Object.assign({}, presentation), steps: Object.assign(Object.assign({}, steps), { visible: Boolean(state.parentTrek) }), description: Object.assign(Object.assign({}, description), { visible: Boolean(this.currentTrek.description) }), recommendations: Object.assign(Object.assign({}, recommendations), { visible: Boolean(this.currentTrek.advice || (this.labels && this.labels.length > 0)) }), sensitiveArea: Object.assign(Object.assign({}, sensitiveArea), { visible: Boolean(state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0) }), informationPlaces: Object.assign(Object.assign({}, informationPlaces), { visible: Boolean(state.currentInformationDesks &&
-          state.currentInformationDesks.filter(currentInformationDesks => this.currentTrek.information_desks.includes(currentInformationDesks.id)).length > 0) }), pois: Object.assign(Object.assign({}, pois), { visible: Boolean(state.currentPois && state.currentPois.length > 0) }), touristicContents: Object.assign(Object.assign({}, touristicContents), { visible: Boolean(state.touristicContents && state.touristicContents.length > 0) }) });
+          state.currentInformationDesks.filter(currentInformationDesks => this.currentTrek.information_desks.includes(currentInformationDesks.id)).length > 0) }), pois: Object.assign(Object.assign({}, pois), { visible: Boolean(state.currentPois && state.currentPois.length > 0) }), touristicContents: Object.assign(Object.assign({}, touristicContents), { visible: Boolean(state.trekTouristicContents && state.trekTouristicContents.length > 0) }), touristicEvents: Object.assign(Object.assign({}, touristicEvents), { visible: Boolean(state.touristicEvents && state.touristicEvents.length > 0) }) });
   }
   handleFullscreen() {
     if (this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].url) {
@@ -323,15 +353,15 @@ export class GrwTrekDetail {
         '--color-on-secondary-container': this.colorOnSecondaryContainer,
         '--color-background': this.colorBackground,
         '--detail-bottom-space-height': this.isLargeView ? '8px' : '104px',
-      } }, this.currentTrek && (h("div", { class: "trek-options" }, h("a", { onClick: () => this.handleScrollTo(this.presentationRef), class: `presentation trek-option${this.options.presentation.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.presentation), this.options.steps.visible && (h("a", { onClick: () => this.handleScrollTo(this.stepsRef), class: `steps trek-option${this.options.steps.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.steps)), this.options.description.visible && (h("a", { onClick: () => this.handleScrollTo(this.descriptionRef), class: `description trek-option${this.options.description.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.description)), this.options.recommendations.visible && (h("a", { onClick: () => this.handleScrollTo(this.recommendationRef), class: `recommendations trek-option${this.options.recommendations.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.recommendations)), this.options.sensitiveArea.visible && (h("a", { onClick: () => this.handleScrollTo(this.sensitiveAreaRef), class: `sensitive-areas trek-option${this.options.sensitiveArea.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.environmentalSensitiveAreas)), this.options.informationPlaces.visible && (h("a", { onClick: () => this.handleScrollTo(this.informationDeskRef), class: `information-places trek-option${this.options.informationPlaces.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.informationPlaces)), this.options.pois.visible && (h("a", { onClick: () => this.handleScrollTo(this.poiRef), class: `pois trek-option${this.options.pois.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.pois)), this.options.touristicContents.visible && (h("a", { onClick: () => this.handleScrollTo(this.touristicContentsRef), class: `touristic-content trek-option${this.options.touristicContents.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.touristicContents)), h("span", { class: "indicator-selected-trek-option", style: { transform: `translateX(${this.handleIndicatorSelectedTrekOption()})` } }))), this.currentTrek && (h("div", { class: "trek-detail-container", ref: el => (this.trekDetailContainerRef = el) }, h("div", { class: "images-container", ref: el => (this.presentationRef = el) }, h("div", { class: "swiper swiper-images", ref: el => (this.swiperImagesRef = el) }, h("div", { class: "swiper-wrapper" }, this.currentTrek.attachments
+      } }, this.currentTrek && (h("div", { class: "trek-options" }, h("a", { onClick: () => this.handleScrollTo(this.presentationRef), class: `presentation trek-option${this.options.presentation.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.presentation), this.options.steps.visible && (h("a", { onClick: () => this.handleScrollTo(this.stepsRef), class: `steps trek-option${this.options.steps.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.steps)), this.options.description.visible && (h("a", { onClick: () => this.handleScrollTo(this.descriptionRef), class: `description trek-option${this.options.description.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.description)), this.options.recommendations.visible && (h("a", { onClick: () => this.handleScrollTo(this.recommendationRef), class: `recommendations trek-option${this.options.recommendations.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.recommendations)), this.options.sensitiveArea.visible && (h("a", { onClick: () => this.handleScrollTo(this.sensitiveAreaRef), class: `sensitive-areas trek-option${this.options.sensitiveArea.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.environmentalSensitiveAreas)), this.options.informationPlaces.visible && (h("a", { onClick: () => this.handleScrollTo(this.informationDeskRef), class: `information-places trek-option${this.options.informationPlaces.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.informationPlaces)), this.options.pois.visible && (h("a", { onClick: () => this.handleScrollTo(this.poiRef), class: `pois trek-option${this.options.pois.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.pois)), this.options.touristicContents.visible && (h("a", { onClick: () => this.handleScrollTo(this.touristicContentsRef), class: `touristic-content trek-option${this.options.touristicContents.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.touristicContents)), this.options.touristicEvents.visible && (h("a", { onClick: () => this.handleScrollTo(this.touristicEventsRef), class: `touristic-event trek-option${this.options.touristicEvents.indicator ? ' selected-trek-option' : ''}` }, translate[state.language].options.touristicEvents)), h("span", { class: "indicator-selected-trek-option", style: { transform: `translateX(${this.handleIndicatorSelectedTrekOption()})` } }))), this.currentTrek && (h("div", { class: "trek-detail-container", ref: el => (this.trekDetailContainerRef = el) }, h("div", { class: "images-container", ref: el => (this.presentationRef = el) }, h("div", { class: "swiper swiper-images", ref: el => (this.swiperImagesRef = el) }, h("div", { class: "swiper-wrapper" }, this.currentTrek.attachments
       .filter(attachment => attachment.type === 'image')
       .map(attachment => (h("div", { class: "swiper-slide" }, h("img", { class: "image", src: attachment.url, loading: "lazy", onClick: () => this.handleFullscreen() }))))), h("div", { class: "swiper-pagination", ref: el => (this.paginationElImagesRef = el) }), h("div", { class: "swiper-button-prev", ref: el => (this.prevElImagesRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.nextElImagesRef = el) }))), h("div", { class: "name" }, this.currentTrek.name), this.themes.length > 0 && (h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label))))), h("div", { class: "sub-container" }, h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
       _b.label), h("div", { class: "icon-label duration" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "timelapse"), formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)), h("div", { class: "icon-label route" }, ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
       _e.route)), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "moving"), formatAscent(this.currentTrek.ascent)), h("div", { class: "icon-label practice" }, ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
-      _g.name)))), h("div", { class: "divider" }), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, translate[state.language].downloads), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "GPX"), h("a", { href: `${this.currentTrek.kml}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "KML"), h("a", { href: `${this.currentTrek.pdf}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "PDF"))), h("div", { class: "divider" }), this.currentTrek.description_teaser && h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), h("div", { class: "divider" }), state.parentTrekId && state.parentTrek && this.currentTrek.id !== state.parentTrekId && (h("div", { class: "parent-trek-container" }, h("button", { class: "parent-trek-title", onClick: () => this.parentTrekPress.emit(state.parentTrekId) }, h("div", null, "<"), state.parentTrek.name))), state.currentTrekSteps && (h("div", { class: "step-container", ref: el => (this.stepsRef = el) }, h("div", { class: "step-title" }, `${state.currentTrekSteps.length} ${translate[state.language].steps}`), h("div", { class: "swiper swiper-step", ref: el => (this.swiperStepRef = el) }, h("div", { class: "swiper-wrapper" }, state.currentTrekSteps &&
+      _g.name)))), h("div", { class: "divider" }), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, translate[state.language].downloads), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "GPX"), h("a", { href: `${this.currentTrek.kml}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "KML"), h("a", { href: `${this.currentTrek.pdf}` }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "PDF"))), h("div", { class: "divider" }), this.currentTrek.description_teaser && h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }), this.currentTrek.ambiance && h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }), state.parentTrekId && state.parentTrek && this.currentTrek.id !== state.parentTrekId && (h("div", null, h("div", { class: "divider" }), h("div", { class: "parent-trek-container" }, h("button", { class: "parent-trek-title", onClick: () => this.parentTrekPress.emit(state.parentTrekId) }, h("div", null, "<"), state.parentTrek.name)))), state.currentTrekSteps && (h("div", { class: "step-container", ref: el => (this.stepsRef = el) }, h("div", { class: "step-title" }, `${state.currentTrekSteps.length} ${translate[state.language].steps}`), h("div", { class: "swiper swiper-step", ref: el => (this.swiperStepRef = el) }, h("div", { class: "swiper-wrapper" }, state.currentTrekSteps &&
       state.currentTrekSteps.map(trek => {
         return (h("div", { class: "swiper-slide" }, h("grw-trek-card", { "reset-store-on-disconnected": "false", key: `trek-${trek.id}`, trek: trek, "is-large-view": false, "is-step": true, "color-primary-app": this.colorPrimaryApp, "color-on-surface": this.colorOnSurface, "color-secondary-container": this.colorSecondaryContainer, "color-on-secondary-container": this.colorOnSecondaryContainer, "color-surface-container-low": this.colorSurfaceContainerLow })));
-      }))))), h("div", { class: "divider" }), this.currentTrek.description && (h("div", { class: "description-container", ref: el => (this.descriptionRef = el) }, h("div", { class: "description-title" }, translate[state.language].description), h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (h("div", { class: "departure-container" }, h("div", { class: "departure-title" }, translate[state.language].departure, " :\u00A0"), h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (h("div", { class: "arrival-container" }, h("div", { class: "arrival-title" }, translate[state.language].arrival, " :\u00A0"), h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.cities && this.currentTrek.cities.length > 0 && (h("div", { class: "cities-container" }, h("div", { class: "cities-title" }, translate[state.language].cities, " :\u00A0"), h("div", { innerHTML: this.cities.join(', ') }))), this.weather && this.currentTrek.departure_city && (h("div", { class: "weather-container" }, h("iframe", { height: "150", frameborder: "0", src: `https://meteofrance.com/widget/prevision/${this.currentTrek.departure_city}0#${this.colorPrimaryApp}` }))), this.currentTrek.access && (h("div", null, h("div", { class: "divider" }), h("div", { class: "access-container" }, h("div", { class: "access-title" }, translate[state.language].roadAccess), h("div", { class: "access", innerHTML: this.currentTrek.access })))), this.currentTrek.public_transport && (h("div", null, h("div", { class: "divider" }), h("div", { class: "public-transport-container" }, h("div", { class: "public-transport-title" }, translate[state.language].transport), h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport })))), (this.currentTrek.advice || this.labels.length > 0) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advice-container", ref: el => (this.recommendationRef = el) }, h("div", { class: "advice-title" }, translate[state.language].recommendations), this.currentTrek.advice && (h("div", { class: "current-advice-container" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "warning"), h("div", { class: "advice", innerHTML: this.currentTrek.advice }))), this.labels.map(label => (h("div", { class: "label-container" }, h("div", { class: "label-sub-container" }, label.pictogram && h("img", { src: label.pictogram }), h("div", { class: "label-name", innerHTML: label.name })), h("div", { class: "label-advice", innerHTML: label.advice }))))))), this.currentTrek.advised_parking && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advised-parking-container", ref: el => (this.parkingRef = el) }, h("div", { class: "advised-parking-title" }, translate[state.language].recommendedParking), h("div", { class: "advised-parking", innerHTML: this.currentTrek.advised_parking })))), this.currentTrek.gear && (h("div", null, h("div", { class: "divider" }), h("div", { class: "gear-container" }, h("div", { class: "gear-title" }, translate[state.language].equipments), h("div", { class: "gear", innerHTML: this.currentTrek.gear })))), state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "sensitive-areas-container", ref: el => (this.sensitiveAreaRef = el) }, h("div", { class: "sensitive-areas-title" }, translate[state.language].environmentalSensitiveAreas), state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea })))))), state.currentInformationDesks &&
+      }))))), h("div", { class: "divider" }), this.currentTrek.description && (h("div", { class: "description-container", ref: el => (this.descriptionRef = el) }, h("div", { class: "description-title" }, translate[state.language].description), h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (h("div", { class: "departure-container" }, h("div", { class: "departure-title" }, translate[state.language].departure, " :\u00A0"), h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (h("div", { class: "arrival-container" }, h("div", { class: "arrival-title" }, translate[state.language].arrival, " :\u00A0"), h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.cities && this.currentTrek.cities.length > 0 && (h("div", { class: "cities-container" }, h("div", { class: "cities-title" }, translate[state.language].crossedCities, " :\u00A0"), h("div", { innerHTML: this.cities.join(', ') }))), this.weather && this.currentTrek.departure_city && (h("div", { class: "weather-container" }, h("iframe", { height: "150", frameborder: "0", src: `https://meteofrance.com/widget/prevision/${this.currentTrek.departure_city}0#${this.colorPrimaryApp}` }))), this.currentTrek.access && (h("div", null, h("div", { class: "divider" }), h("div", { class: "access-container" }, h("div", { class: "access-title" }, translate[state.language].roadAccess), h("div", { class: "access", innerHTML: this.currentTrek.access })))), this.currentTrek.public_transport && (h("div", null, h("div", { class: "divider" }), h("div", { class: "public-transport-container" }, h("div", { class: "public-transport-title" }, translate[state.language].transport), h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport })))), (this.currentTrek.advice || this.labels.length > 0) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advice-container", ref: el => (this.recommendationRef = el) }, h("div", { class: "advice-title" }, translate[state.language].recommendations), this.currentTrek.advice && (h("div", { class: "current-advice-container" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "warning"), h("div", { class: "advice", innerHTML: this.currentTrek.advice }))), this.labels.map(label => (h("div", { class: "label-container" }, h("div", { class: "label-sub-container" }, label.pictogram && h("img", { src: label.pictogram }), h("div", { class: "label-name", innerHTML: label.name })), h("div", { class: "label-advice", innerHTML: label.advice }))))))), this.currentTrek.advised_parking && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advised-parking-container", ref: el => (this.parkingRef = el) }, h("div", { class: "advised-parking-title" }, translate[state.language].recommendedParking), h("div", { class: "advised-parking", innerHTML: this.currentTrek.advised_parking })))), this.currentTrek.gear && (h("div", null, h("div", { class: "divider" }), h("div", { class: "gear-container" }, h("div", { class: "gear-title" }, translate[state.language].equipments), h("div", { class: "gear", innerHTML: this.currentTrek.gear })))), state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "sensitive-areas-container", ref: el => (this.sensitiveAreaRef = el) }, h("div", { class: "sensitive-areas-title" }, translate[state.language].environmentalSensitiveAreas), state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea })))))), state.currentInformationDesks &&
       state.currentInformationDesks.filter(currentInformationDesks => this.currentTrek.information_desks.includes(currentInformationDesks.id)).length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "information-desks-container", ref: el => (this.informationDeskRef = el) }, h("div", { class: "information-desks-title" }, translate[state.language].informationPlaces), h("div", { class: "swiper swiper-information-desks", ref: el => (this.swiperInformationDesksRef = el) }, h("div", { class: "swiper-wrapper" }, state.currentInformationDesks
       .filter(currentInformationDesks => this.currentTrek.information_desks.includes(currentInformationDesks.id))
       .map(informationDesk => (h("div", { class: "swiper-slide" }, h("grw-information-desk", { informationDesk: informationDesk }))))))))), (this.currentTrek.disabled_infrastructure ||
@@ -342,7 +372,7 @@ export class GrwTrekDetail {
       this.currentTrek.accessibility_signage ||
       this.currentTrek.accessibility_covering ||
       this.currentTrek.accessibility_exposure ||
-      this.currentTrek.accessibility_advice) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "accessibilities-container" }, h("div", { class: "accessibilities-title" }, translate[state.language].accessibility), this.currentTrek.disabled_infrastructure && h("div", { innerHTML: this.currentTrek.disabled_infrastructure }), h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (h("div", { class: "accessibility-content-container" }, h("img", { src: accessibility.pictogram }), h("div", { innerHTML: accessibility.name }))))), this.currentTrek.accessibility_level && (h("div", { class: "accessibility-level-container" }, h("div", { class: "accessibility-level-title" }, translate[state.language].accessibilityLevel), h("div", { innerHTML: this.accessibilityLevel.name }))), this.currentTrek.accessibility_slope && (h("div", { class: "accessibility-slope-container" }, h("div", { class: "accessibility-slope-title" }, translate[state.language].accessibilitySlope), h("div", { innerHTML: this.currentTrek.accessibility_slope }))), this.currentTrek.accessibility_width && (h("div", { class: "accessibility-width-container" }, h("div", { class: "accessibility-width-title" }, translate[state.language].accessibilityWidth), h("div", { innerHTML: this.currentTrek.accessibility_width }))), this.currentTrek.accessibility_signage && (h("div", { class: "accessibility-signage-container" }, h("div", { class: "accessibility-signage-title" }, translate[state.language].accessibilitySignage), h("div", { innerHTML: this.currentTrek.accessibility_signage }))), this.currentTrek.accessibility_covering && (h("div", { class: "accessibility-covering-container" }, h("div", { class: "accessibility-covering-title" }, translate[state.language].accessibilityCovering), h("div", { innerHTML: this.currentTrek.accessibility_covering }))), this.currentTrek.accessibility_exposure && (h("div", { class: "accessibility-exposure-container" }, h("div", { class: "accessibility-exposure-title" }, translate[state.language].accessibilityExposure), h("div", { innerHTML: this.currentTrek.accessibility_exposure }))), this.currentTrek.accessibility_advice && (h("div", { class: "accessibility-advice-container" }, h("div", { class: "accessibility-advice-title" }, translate[state.language].accessibilityAdvices), h("div", { innerHTML: this.currentTrek.accessibility_advice })))))), state.currentPois && state.currentPois.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "pois-container", ref: el => (this.poiRef = el) }, h("div", { class: "pois-title" }, translate[state.language].pois(state.currentPois.length)), h("div", { class: "swiper swiper-pois", ref: el => (this.swiperPoisRef = el) }, h("div", { class: "swiper-wrapper" }, state.currentPois.map(poi => (h("div", { class: "swiper-slide" }, h("grw-poi", { poi: poi }))))))))), state.touristicContents && state.touristicContents.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "touristic-content-container", ref: el => (this.touristicContentsRef = el) }, h("div", { class: "touristic-content-title" }, translate[state.language].touristicContents(state.touristicContents.length)), h("div", { class: "swiper swiper-touristic-content", ref: el => (this.swiperTouristicContentsRef = el) }, h("div", { class: "swiper-wrapper" }, state.touristicContents.map(touristicContent => (h("div", { class: "swiper-slide" }, h("grw-touristic-content", { touristicContent: touristicContent }))))))))), this.currentTrek.source && this.currentTrek.source.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "source-container" }, h("div", { class: "source-title" }, translate[state.language].sources), this.sources.map(source => (h("div", { class: "source-sub-container" }, source.pictogram && h("img", { src: source.pictogram }), h("div", null, h("div", { class: "source-name", innerHTML: source.name }), h("a", { class: "source-advice", href: source.website, innerHTML: source.website })))))))), h("div", { class: "detail-bottom-space" })))));
+      this.currentTrek.accessibility_advice) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "accessibilities-container" }, h("div", { class: "accessibilities-title" }, translate[state.language].accessibility), this.currentTrek.disabled_infrastructure && h("div", { innerHTML: this.currentTrek.disabled_infrastructure }), h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (h("div", { class: "accessibility-content-container" }, h("img", { src: accessibility.pictogram }), h("div", { innerHTML: accessibility.name }))))), this.currentTrek.accessibility_level && (h("div", { class: "accessibility-level-container" }, h("div", { class: "accessibility-level-title" }, translate[state.language].accessibilityLevel), h("div", { innerHTML: this.accessibilityLevel.name }))), this.currentTrek.accessibility_slope && (h("div", { class: "accessibility-slope-container" }, h("div", { class: "accessibility-slope-title" }, translate[state.language].accessibilitySlope), h("div", { innerHTML: this.currentTrek.accessibility_slope }))), this.currentTrek.accessibility_width && (h("div", { class: "accessibility-width-container" }, h("div", { class: "accessibility-width-title" }, translate[state.language].accessibilityWidth), h("div", { innerHTML: this.currentTrek.accessibility_width }))), this.currentTrek.accessibility_signage && (h("div", { class: "accessibility-signage-container" }, h("div", { class: "accessibility-signage-title" }, translate[state.language].accessibilitySignage), h("div", { innerHTML: this.currentTrek.accessibility_signage }))), this.currentTrek.accessibility_covering && (h("div", { class: "accessibility-covering-container" }, h("div", { class: "accessibility-covering-title" }, translate[state.language].accessibilityCovering), h("div", { innerHTML: this.currentTrek.accessibility_covering }))), this.currentTrek.accessibility_exposure && (h("div", { class: "accessibility-exposure-container" }, h("div", { class: "accessibility-exposure-title" }, translate[state.language].accessibilityExposure), h("div", { innerHTML: this.currentTrek.accessibility_exposure }))), this.currentTrek.accessibility_advice && (h("div", { class: "accessibility-advice-container" }, h("div", { class: "accessibility-advice-title" }, translate[state.language].accessibilityAdvices), h("div", { innerHTML: this.currentTrek.accessibility_advice })))))), state.currentPois && state.currentPois.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "pois-container", ref: el => (this.poiRef = el) }, h("div", { class: "pois-title" }, translate[state.language].pois(state.currentPois.length)), h("div", { class: "swiper swiper-pois", ref: el => (this.swiperPoisRef = el) }, h("div", { class: "swiper-wrapper" }, state.currentPois.map(poi => (h("div", { class: "swiper-slide" }, h("grw-poi", { poi: poi }))))))))), state.trekTouristicContents && state.trekTouristicContents.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "touristic-content-container", ref: el => (this.touristicContentsRef = el) }, h("div", { class: "touristic-content-title" }, translate[state.language].touristicContents(state.trekTouristicContents.length)), h("div", { class: "swiper swiper-touristic-content", ref: el => (this.swiperTouristicContentsRef = el) }, h("div", { class: "swiper-wrapper" }, state.trekTouristicContents.map(touristicContent => (h("div", { class: "swiper-slide" }, h("grw-touristic-content-card", { touristicContent: touristicContent, isInsideHorizontalList: true }))))))))), state.touristicEvents && state.touristicEvents.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "touristic-event-container", ref: el => (this.touristicEventsRef = el) }, h("div", { class: "touristic-event-title" }, translate[state.language].touristicEvents(state.touristicEvents.length)), h("div", { class: "swiper swiper-touristic-event", ref: el => (this.swiperTouristicEventsRef = el) }, h("div", { class: "swiper-wrapper" }, state.touristicEvents.map(touristicEvent => (h("div", { class: "swiper-slide" }, h("grw-touristic-event-card", { touristicEvent: touristicEvent }))))))))), this.currentTrek.source && this.currentTrek.source.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "source-container" }, h("div", { class: "source-title" }, translate[state.language].sources), this.sources.map(source => (h("div", { class: "source-sub-container" }, source.pictogram && h("img", { src: source.pictogram }), h("div", null, h("div", { class: "source-name", innerHTML: source.name }), h("a", { class: "source-advice", href: source.website, innerHTML: source.website })))))))), h("div", { class: "detail-bottom-space" })))));
   }
   static get is() { return "grw-trek-detail"; }
   static get encapsulation() { return "shadow"; }
@@ -700,6 +730,21 @@ export class GrwTrekDetail {
           "resolved": "boolean",
           "references": {}
         }
+      }, {
+        "method": "touristicEventsIsInViewport",
+        "name": "touristicEventsIsInViewport",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }, {
         "method": "parentTrekPress",
         "name": "parentTrekPress",