@geotrekce/geotrek-rando-widget 0.5.2 → 0.5.4

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

@@ -1,8 +1,8 @@
 import { Host, h } from '@stencil/core';
-import Swiper, { Navigation, Pagination, Keyboard, FreeMode, Mousewheel } from 'swiper';
+import Swiper, { Navigation, Pagination, Keyboard, FreeMode, Mousewheel, Scrollbar } from 'swiper';
 import { translate } from 'i18n/i18n';
 import state, { onChange, reset } from 'store/store';
-import { formatDuration, formatLength, formatAscent } from 'utils/utils';
+import { formatDuration, formatLength, formatAscent, formatDescent } from 'utils/utils';
 const threshold = 1;
 const presentation = {
   visible: true,
@@ -19,6 +19,11 @@ const description = {
   indicator: false,
   ref: 'descriptionOptionRef',
 };
+const pois = {
+  visible: false,
+  indicator: false,
+  ref: 'poisOptionRef',
+};
 const recommendations = {
   visible: false,
   indicator: false,
@@ -34,10 +39,10 @@ const informationPlaces = {
   indicator: false,
   ref: 'informationPlacesOptionRef',
 };
-const pois = {
+const accessibility = {
   visible: false,
   indicator: false,
-  ref: 'poisOptionRef',
+  ref: 'accessibilityOptionRef',
 };
 const touristicContents = {
   visible: false,
@@ -53,10 +58,11 @@ const options = {
   presentation,
   steps,
   description,
+  pois,
   recommendations,
   sensitiveArea,
   informationPlaces,
-  pois,
+  accessibility,
   touristicContents,
   touristicEvents,
 };
@@ -76,6 +82,7 @@ export class GrwTrekDetail {
     this.cities = undefined;
     this.options = undefined;
     this.trek = undefined;
+    this.emergencyNumber = undefined;
     this.fontFamily = 'Roboto';
     this.colorPrimaryApp = '#6b0030';
     this.colorOnSurface = '#49454e';
@@ -105,12 +112,17 @@ export class GrwTrekDetail {
       this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
     };
     this.swiperStep = new Swiper(this.swiperStepRef, {
-      modules: [FreeMode, Mousewheel],
+      modules: [FreeMode, Mousewheel, Scrollbar],
       slidesPerView: 1.5,
       spaceBetween: 20,
       grabCursor: true,
       freeMode: true,
       mousewheel: { forceToAxis: true },
+      scrollbar: {
+        draggable: true,
+        hide: false,
+        el: this.stepSwiperScrollbar,
+      },
       breakpointsBase: 'container',
       breakpoints: {
         '540': {
@@ -119,12 +131,17 @@ export class GrwTrekDetail {
       },
     });
     this.swiperPois = new Swiper(this.swiperPoisRef, {
-      modules: [FreeMode, Mousewheel],
+      modules: [FreeMode, Mousewheel, Scrollbar],
       slidesPerView: 1.5,
       spaceBetween: 20,
       grabCursor: true,
       freeMode: true,
       mousewheel: { forceToAxis: true },
+      scrollbar: {
+        draggable: true,
+        hide: false,
+        el: this.poisSwiperScrollbar,
+      },
       breakpointsBase: 'container',
       breakpoints: {
         '540': {
@@ -133,12 +150,17 @@ export class GrwTrekDetail {
       },
     });
     this.swiperInformationDesks = new Swiper(this.swiperInformationDesksRef, {
-      modules: [FreeMode, Mousewheel],
+      modules: [FreeMode, Mousewheel, Scrollbar],
       slidesPerView: 1.5,
       spaceBetween: 20,
       grabCursor: true,
       freeMode: true,
       mousewheel: { forceToAxis: true },
+      scrollbar: {
+        draggable: true,
+        hide: false,
+        el: this.informationDesksContentsSwiperScrollbar,
+      },
       breakpointsBase: 'container',
       breakpoints: {
         '540': {
@@ -147,12 +169,17 @@ export class GrwTrekDetail {
       },
     });
     this.swiperTouristicContents = new Swiper(this.swiperTouristicContentsRef, {
-      modules: [FreeMode, Mousewheel],
+      modules: [FreeMode, Mousewheel, Scrollbar],
       slidesPerView: 1.5,
       spaceBetween: 20,
       grabCursor: true,
       freeMode: true,
       mousewheel: { forceToAxis: true },
+      scrollbar: {
+        draggable: true,
+        hide: false,
+        el: this.touristicContentsSwiperScrollbar,
+      },
       breakpointsBase: 'container',
       breakpoints: {
         '540': {
@@ -161,12 +188,17 @@ export class GrwTrekDetail {
       },
     });
     this.swiperTouristicEvents = new Swiper(this.swiperTouristicEventsRef, {
-      modules: [FreeMode, Mousewheel],
+      modules: [FreeMode, Mousewheel, Scrollbar],
       slidesPerView: 1.5,
       spaceBetween: 20,
       grabCursor: true,
       freeMode: true,
       mousewheel: { forceToAxis: true },
+      scrollbar: {
+        draggable: true,
+        hide: false,
+        el: this.touristicEventsSwiperScrollbar,
+      },
       breakpointsBase: 'container',
       breakpoints: {
         '540': {
@@ -175,90 +207,98 @@ export class GrwTrekDetail {
       },
     });
     if (this.presentationRef) {
-      const presentationObserver = new IntersectionObserver(entries => {
+      this.presentationObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.options = Object.assign(Object.assign({}, this.options), { presentation: Object.assign(Object.assign({}, this.defaultOptions.presentation), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      presentationObserver.observe(this.presentationRef);
+      this.presentationObserver.observe(this.presentationRef);
     }
     if (this.stepsRef) {
-      const stepsObserver = new IntersectionObserver(entries => {
+      this.stepsObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.stepsIsInViewport.emit(isIntersecting);
         this.options = Object.assign(Object.assign({}, this.options), { steps: Object.assign(Object.assign({}, this.defaultOptions.steps), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      stepsObserver.observe(this.stepsRef);
+      this.stepsObserver.observe(this.stepsRef);
     }
     if (this.descriptionRef) {
-      const descriptionObserver = new IntersectionObserver(entries => {
+      this.descriptionObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.descriptionIsInViewport.emit(isIntersecting);
         this.options = Object.assign(Object.assign({}, this.options), { description: Object.assign(Object.assign({}, this.defaultOptions.description), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      descriptionObserver.observe(this.descriptionRef);
+      this.descriptionObserver.observe(this.descriptionRef);
     }
     if (this.recommendationRef) {
-      const recommendationsObserver = new IntersectionObserver(entries => {
+      this.recommendationsObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.options = Object.assign(Object.assign({}, this.options), { recommendations: Object.assign(Object.assign({}, this.defaultOptions.recommendations), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      recommendationsObserver.observe(this.recommendationRef);
+      this.recommendationsObserver.observe(this.recommendationRef);
     }
     if (this.parkingRef) {
-      const parkingObserver = new IntersectionObserver(entries => {
+      this.parkingObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.parkingIsInViewport.emit(isIntersecting);
       }, { threshold });
-      parkingObserver.observe(this.parkingRef);
+      this.parkingObserver.observe(this.parkingRef);
     }
     if (this.sensitiveAreaRef) {
-      const sensitiveAreaRefObserver = new IntersectionObserver(entries => {
+      this.sensitiveAreaObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.sensitiveAreaIsInViewport.emit(isIntersecting);
         this.options = Object.assign(Object.assign({}, this.options), { sensitiveArea: Object.assign(Object.assign({}, this.defaultOptions.sensitiveArea), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      sensitiveAreaRefObserver.observe(this.sensitiveAreaRef);
+      this.sensitiveAreaObserver.observe(this.sensitiveAreaRef);
     }
     if (this.informationPlacesRef) {
-      const informationPlacesObserver = new IntersectionObserver(entries => {
+      this.informationPlacesObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.informationPlacesIsInViewport.emit(isIntersecting);
         this.options = Object.assign(Object.assign({}, this.options), { informationPlaces: Object.assign(Object.assign({}, this.defaultOptions.informationPlaces), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      informationPlacesObserver.observe(this.informationPlacesRef);
+      this.informationPlacesObserver.observe(this.informationPlacesRef);
+    }
+    if (this.accessibilityRef) {
+      this.accessibilityObserver = new IntersectionObserver(entries => {
+        const isIntersecting = entries[0].isIntersecting;
+        this.options = Object.assign(Object.assign({}, this.options), { accessibility: Object.assign(Object.assign({}, this.defaultOptions.accessibility), { indicator: isIntersecting }) });
+        this.handleIndicatorSelectedTrekOption();
+      }, { threshold });
+      this.accessibilityObserver.observe(this.accessibilityRef);
     }
     if (this.poiRef) {
-      const poiObserver = new IntersectionObserver(entries => {
+      this.poiObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.poiIsInViewport.emit(isIntersecting);
         this.options = Object.assign(Object.assign({}, this.options), { pois: Object.assign(Object.assign({}, this.defaultOptions.pois), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      poiObserver.observe(this.poiRef);
+      this.poiObserver.observe(this.poiRef);
     }
     if (this.touristicContentsRef) {
-      const touristicContentObserver = new IntersectionObserver(entries => {
+      this.touristicContentObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.touristicContentsIsInViewport.emit(isIntersecting);
         this.options = Object.assign(Object.assign({}, this.options), { touristicContents: Object.assign(Object.assign({}, this.defaultOptions.touristicContents), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      touristicContentObserver.observe(this.touristicContentsRef);
+      this.touristicContentObserver.observe(this.touristicContentsRef);
     }
     if (this.touristicEventsRef) {
-      const touristicEventObserver = new IntersectionObserver(entries => {
+      this.touristicEventObserver = new IntersectionObserver(entries => {
         const isIntersecting = entries[0].isIntersecting;
         this.touristicEventsIsInViewport.emit(isIntersecting);
         this.options = Object.assign(Object.assign({}, this.options), { touristicEvents: Object.assign(Object.assign({}, this.defaultOptions.touristicEvents), { indicator: isIntersecting }) });
         this.handleIndicatorSelectedTrekOption();
       }, { threshold });
-      touristicEventObserver.observe(this.touristicContentsRef);
+      this.touristicEventObserver.observe(this.touristicContentsRef);
     }
   }
   connectedCallback() {
@@ -300,13 +340,34 @@ export class GrwTrekDetail {
     });
   }
   disconnectedCallback() {
+    this.presentationObserver && this.presentationObserver.disconnect();
+    this.stepsObserver && this.stepsObserver.disconnect();
+    this.descriptionObserver && this.descriptionObserver.disconnect();
+    this.recommendationsObserver && this.recommendationsObserver.disconnect();
+    this.parkingObserver && this.parkingObserver.disconnect();
+    this.sensitiveAreaObserver && this.sensitiveAreaObserver.disconnect();
+    this.informationPlacesObserver && this.informationPlacesObserver.disconnect();
+    this.accessibilityObserver && this.accessibilityObserver.disconnect();
+    this.poiObserver && this.poiObserver.disconnect();
+    this.accessibilityObserver && this.accessibilityObserver.disconnect();
+    this.touristicContentObserver && this.touristicContentObserver.disconnect();
+    this.touristicEventObserver && this.touristicEventObserver.disconnect();
     if (this.resetStoreOnDisconnected) {
       reset();
     }
   }
   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.trekTouristicContents && state.trekTouristicContents.length > 0) }), touristicEvents: Object.assign(Object.assign({}, touristicEvents), { visible: Boolean(state.touristicEvents && state.touristicEvents.length > 0) }) });
+    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) }), pois: Object.assign(Object.assign({}, pois), { visible: Boolean(state.currentPois && state.currentPois.length > 0) }), 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) }), accessibility: Object.assign(Object.assign({}, accessibility), { visible: Boolean(this.currentTrek.disabled_infrastructure ||
+          (this.accessibilities && this.accessibilities.length > 0) ||
+          this.currentTrek.accessibility_level ||
+          this.currentTrek.accessibility_slope ||
+          this.currentTrek.accessibility_width ||
+          this.currentTrek.accessibility_signage ||
+          this.currentTrek.accessibility_covering ||
+          this.currentTrek.accessibility_exposure ||
+          this.currentTrek.accessibility_advice ||
+          this.emergencyNumber) }), 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) {
@@ -356,8 +417,8 @@ export class GrwTrekDetail {
         '--color-secondary-container': this.colorSecondaryContainer,
         '--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", { ref: el => (this.presentationOptionRef = el), onClick: () => this.handleScrollTo(this.presentationRef), class: `presentation trek-option${this.indicatorSelectedTrekOption.ref === 'presentationOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.presentation), this.options.steps.visible && (h("a", { ref: el => (this.stepsOptionRef = el), 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", { ref: el => (this.descriptionOptionRef = el), onClick: () => this.handleScrollTo(this.descriptionRef), class: `description trek-option${this.indicatorSelectedTrekOption.ref === 'descriptionOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.description)), this.options.recommendations.visible && (h("a", { ref: el => (this.recommendationsOptionRef = el), onClick: () => this.handleScrollTo(this.recommendationRef), class: `recommendations trek-option${this.indicatorSelectedTrekOption.ref === 'recommendationsOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.recommendations)), this.options.sensitiveArea.visible && (h("a", { ref: el => (this.sensitiveAreaOptionRef = el), onClick: () => this.handleScrollTo(this.sensitiveAreaRef), class: `sensitive-areas trek-option${this.indicatorSelectedTrekOption.ref === 'sensitiveAreaOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.environmentalSensitiveAreas)), this.options.informationPlaces.visible && (h("a", { ref: el => (this.informationPlacesOptionRef = el), onClick: () => this.handleScrollTo(this.informationPlacesRef), class: `information-places trek-option${this.indicatorSelectedTrekOption.ref === 'informationPlacesOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.informationPlaces)), this.options.pois.visible && (h("a", { ref: el => (this.poisOptionRef = el), onClick: () => this.handleScrollTo(this.poiRef), class: `pois trek-option${this.indicatorSelectedTrekOption.ref === 'poisOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.pois)), this.options.touristicContents.visible && (h("a", { ref: el => (this.touristicContentsOptionRef = el), onClick: () => this.handleScrollTo(this.touristicContentsRef), class: `touristic-content trek-option${this.indicatorSelectedTrekOption.ref === 'touristicContentsOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.touristicContents)), this.options.touristicEvents.visible && (h("a", { ref: el => (this.touristicEventsOptionRef = el), onClick: () => this.handleScrollTo(this.touristicEventsRef), class: `touristic-event trek-option${this.indicatorSelectedTrekOption.ref === 'touristicEventsOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.touristicEvents)), this.presentationOptionRef && (h("span", { class: "indicator-selected-trek-option", style: {
+        '--detail-bottom-space-height': this.isLargeView ? '8px' : '200px',
+      } }, this.currentTrek && (h("div", { class: "trek-options" }, h("a", { ref: el => (this.presentationOptionRef = el), onClick: () => this.handleScrollTo(this.presentationRef), class: `presentation trek-option${this.indicatorSelectedTrekOption.ref === 'presentationOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.presentation), this.options.steps.visible && (h("a", { ref: el => (this.stepsOptionRef = el), 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", { ref: el => (this.descriptionOptionRef = el), onClick: () => this.handleScrollTo(this.descriptionRef), class: `description trek-option${this.indicatorSelectedTrekOption.ref === 'descriptionOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.description)), this.options.pois.visible && (h("a", { ref: el => (this.poisOptionRef = el), onClick: () => this.handleScrollTo(this.poiRef), class: `pois trek-option${this.indicatorSelectedTrekOption.ref === 'poisOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.pois)), this.options.recommendations.visible && (h("a", { ref: el => (this.recommendationsOptionRef = el), onClick: () => this.handleScrollTo(this.recommendationRef), class: `recommendations trek-option${this.indicatorSelectedTrekOption.ref === 'recommendationsOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.recommendations)), this.options.sensitiveArea.visible && (h("a", { ref: el => (this.sensitiveAreaOptionRef = el), onClick: () => this.handleScrollTo(this.sensitiveAreaRef), class: `sensitive-areas trek-option${this.indicatorSelectedTrekOption.ref === 'sensitiveAreaOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.environmentalSensitiveAreas)), this.options.informationPlaces.visible && (h("a", { ref: el => (this.informationPlacesOptionRef = el), onClick: () => this.handleScrollTo(this.informationPlacesRef), class: `information-places trek-option${this.indicatorSelectedTrekOption.ref === 'informationPlacesOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.informationPlaces)), this.options.accessibility.visible && (h("a", { ref: el => (this.accessibilityOptionRef = el), onClick: () => this.handleScrollTo(this.accessibilityRef), class: `accessibility trek-option${this.indicatorSelectedTrekOption.ref === 'accessibilityOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.accessibility)), this.options.touristicContents.visible && (h("a", { ref: el => (this.touristicContentsOptionRef = el), onClick: () => this.handleScrollTo(this.touristicContentsRef), class: `touristic-content trek-option${this.indicatorSelectedTrekOption.ref === 'touristicContentsOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.touristicContents)), this.options.touristicEvents.visible && (h("a", { ref: el => (this.touristicEventsOptionRef = el), onClick: () => this.handleScrollTo(this.touristicEventsRef), class: `touristic-event trek-option${this.indicatorSelectedTrekOption.ref === 'touristicEventsOptionRef' ? ' selected-trek-option' : ''}` }, translate[state.language].options.touristicEvents)), this.presentationOptionRef && (h("span", { class: "indicator-selected-trek-option", style: {
         transform: `translateX(${this.indicatorSelectedTrekOption.translateX})`,
         width: this.indicatorSelectedTrekOption.width,
         backgroundSize: this.indicatorSelectedTrekOption.backgroundSize,
@@ -366,7 +427,7 @@ export class GrwTrekDetail {
       .map(attachment => (h("div", { class: "swiper-slide" }, h("img", {
       /* @ts-ignore */
       crossorigin: "anonymous", 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", {
+    }))))), 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: "icon-label difficulty" }, ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && (h("img", {
       /* @ts-ignore */
       crossorigin: "anonymous", src: this.difficulty.pictogram
     })), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
@@ -374,20 +435,26 @@ export class GrwTrekDetail {
       /* @ts-ignore */
       crossorigin: "anonymous", 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", {
+      _e.route), h("div", { class: "icon-label length" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), this.currentTrek.ascent && (h("div", { class: "icon-label ascent" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "moving"), formatAscent(this.currentTrek.ascent))), this.currentTrek.descent && (h("div", { class: "icon-label descent" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "moving"), formatDescent(this.currentTrek.descent))), h("div", { class: "icon-label practice" }, ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && (h("img", {
       /* @ts-ignore */
       crossorigin: "anonymous", src: this.practice.pictogram
     })), (_g = this.practice) === null || _g === void 0 ? void 0 :
-      _g.name)), this.currentTrek.ratings.map(trekRating => (h("div", { class: "row" }, `${state.ratingsScale.find(ratingScale => ratingScale.id === state.ratings.find(rating => rating.id === trekRating).scale).name} : ${state.ratings.find(rating => rating.id === trekRating).name}`))), this.currentTrek.ratings_description && this.currentTrek.ratings_description !== '' && h("div", { class: "row" }, this.currentTrek.ratings_description))), 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}`, target: "_blank", rel: "noopener noreferrer" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "GPX"), h("a", { href: `${this.currentTrek.kml}`, target: "_blank", rel: "noopener noreferrer" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "KML"), h("a", { href: `${this.currentTrek.pdf}`, target: "_blank", rel: "noopener noreferrer" }, 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" }, h("div", { class: "step-title", ref: el => (this.stepsRef = el) }, `${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: "icon-label networks" }, this.currentTrek.networks.map(networkId => {
+      const currentNetwork = state.networks.find(network => network.id === networkId);
+      return (h("div", { class: "network" }, h("img", {
+        /* @ts-ignore */
+        crossorigin: "anonymous", src: currentNetwork.pictogram
+      }), currentNetwork.label));
+    })), this.currentTrek.ratings.map(trekRating => (h("div", { class: "row" }, `${state.ratingsScale.find(ratingScale => ratingScale.id === state.ratings.find(rating => rating.id === trekRating).scale).name} : ${state.ratings.find(rating => rating.id === trekRating).name}`))), this.currentTrek.ratings_description && this.currentTrek.ratings_description !== '' && h("div", { class: "row" }, this.currentTrek.ratings_description))), 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}`, target: "_blank", rel: "noopener noreferrer" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "GPX"), h("a", { href: `${this.currentTrek.kml}`, target: "_blank", rel: "noopener noreferrer" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "download"), "KML"), h("a", { href: `${this.currentTrek.pdf}`, target: "_blank", rel: "noopener noreferrer" }, 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" }, h("div", { class: "step-title", ref: el => (this.stepsRef = el) }, `${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, fontFamily: this.fontFamily, "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" }, h("div", { class: "description-title", ref: el => (this.descriptionRef = el) }, 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" }, h("div", { class: "advice-title", ref: el => (this.recommendationRef = el) }, 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", {
+        return (h("div", { class: "swiper-slide" }, h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": false, "is-step": true, fontFamily: this.fontFamily, "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: "swiper-scrollbar", ref: el => (this.stepSwiperScrollbar = el) })))), h("div", { class: "divider" }), this.currentTrek.description && (h("div", { class: "description-container" }, h("div", { class: "description-title", ref: el => (this.descriptionRef = el) }, 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(', ') }))), state.currentPois && state.currentPois.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "pois-container" }, h("div", { class: "pois-title", ref: el => (this.poiRef = el) }, 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 }))))), h("div", { class: "swiper-scrollbar", ref: el => (this.poisSwiperScrollbar = el) }))))), this.weather && this.currentTrek.departure_city && (h("div", null, h("div", { class: "divider" }), 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].roadAccessAndParking), h("div", { class: "access", innerHTML: this.currentTrek.access }), this.currentTrek.advised_parking && (h("div", null, h("div", { class: "advised-parking-title", ref: el => (this.parkingRef = el) }, translate[state.language].recommendedParking), h("div", { class: "advised-parking", innerHTML: this.currentTrek.advised_parking })))))), 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.currentTrek.gear || this.labels.length > 0) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "advice-container" }, h("div", { class: "advice-title", ref: el => (this.recommendationRef = el) }, 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.currentTrek.gear && (h("div", { class: "gear-container" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "backpack"), h("div", { class: "gear", innerHTML: this.currentTrek.gear }))), this.labels.map(label => (h("div", { class: "label-container" }, h("div", { class: "label-sub-container" }, label.pictogram && (h("img", {
       /* @ts-ignore */
       crossorigin: "anonymous", 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" }, h("div", { class: "advised-parking-title", ref: el => (this.parkingRef = el) }, 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" }, h("div", { class: "sensitive-areas-title", ref: el => (this.sensitiveAreaRef = el) }, translate[state.language].environmentalSensitiveAreas), state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea })))))), state.currentInformationDesks &&
+    })), h("div", { class: "label-name", innerHTML: label.name })), h("div", { class: "label-advice", innerHTML: label.advice }))))))), state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "sensitive-areas-container" }, h("div", { class: "sensitive-areas-title", ref: el => (this.sensitiveAreaRef = el) }, translate[state.language].environmentalSensitiveAreas), h("div", { class: "sensitive-areas-description" }, translate[state.language].sensitiveAreasDescription), 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" }, h("div", { class: "information-desks-title", ref: el => (this.informationPlacesRef = el) }, 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 ||
+      .map(informationDesk => (h("div", { class: "swiper-slide" }, h("grw-information-desk", { informationDesk: informationDesk }))))), h("div", { class: "swiper-scrollbar", ref: el => (this.informationDesksContentsSwiperScrollbar = el) }))))), (this.currentTrek.disabled_infrastructure ||
       (this.accessibilities && this.accessibilities.length > 0) ||
       this.currentTrek.accessibility_level ||
       this.currentTrek.accessibility_slope ||
@@ -395,10 +462,17 @@ 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", {
+      this.currentTrek.accessibility_advice ||
+      this.emergencyNumber) && (h("div", null, h("div", { class: "divider" }), h("div", { class: "accessibilities-container" }, h("div", { class: "accessibilities-title", ref: el => (this.accessibilityRef = el) }, translate[state.language].accessibility), this.currentTrek.disabled_infrastructure && h("div", { innerHTML: this.currentTrek.disabled_infrastructure }), this.accessibilities && this.accessibilities.length > 0 && (h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (h("div", { class: "accessibility-content-container" }, h("img", {
       /* @ts-ignore */
       crossorigin: "anonymous", 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" }, h("div", { class: "pois-title", ref: el => (this.poiRef = el) }, 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" }, h("div", { class: "touristic-content-title", ref: el => (this.touristicContentsRef = el) }, 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", { fontFamily: this.fontFamily, touristicContent: touristicContent, isInsideHorizontalList: true }))))))))), state.touristicEvents && state.touristicEvents.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "touristic-event-container" }, h("div", { class: "touristic-event-title", ref: el => (this.touristicEventsRef = el) }, 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", { fontFamily: this.fontFamily, 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", {
+    }), h("div", { innerHTML: accessibility.name })))))), this.emergencyNumber && (h("div", { class: "accessibility-emergency-number-container" }, h("div", { class: "accessibility-emergency-number-title" }, translate[state.language].emergencyNumber), h("div", { class: "accessibility-emergency-number-content" }, h("a", { href: `tel:${this.emergencyNumber.toString()}` }, h("span", {
+      /* @ts-ignore */
+      translate: false, class: "material-symbols material-symbols-outlined"
+    }, "call"), this.emergencyNumber.toString())))), 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.trekTouristicContents && state.trekTouristicContents.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "touristic-content-container" }, h("div", { class: "touristic-content-title", ref: el => (this.touristicContentsRef = el) }, 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", { fontFamily: this.fontFamily, touristicContent: touristicContent, isInsideHorizontalList: true }))))), h("div", { class: "swiper-scrollbar", ref: el => (this.touristicContentsSwiperScrollbar = el) }))))), state.touristicEvents && state.touristicEvents.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "touristic-event-container" }, h("div", { class: "touristic-event-title", ref: el => (this.touristicEventsRef = el) }, 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", { fontFamily: this.fontFamily, touristicEvent: touristicEvent }))))), h("div", { class: "swiper-scrollbar", ref: el => (this.touristicEventsSwiperScrollbar = el) }))))), this.currentTrek.web_links && this.currentTrek.web_links.length > 0 && (h("div", null, h("div", { class: "divider" }), h("div", { class: "weblinks-container" }, h("div", { class: "weblinks-title" }, translate[state.language].learnMore), this.currentTrek.web_links.map(weblink => (h("a", { class: "weblink-container", href: weblink.url, target: "_blank", rel: "noopener noreferrer" }, weblink.category && weblink.category.pictogram && (h("img", {
+      /* @ts-ignore */
+      crossorigin: "anonymous", src: weblink.category.pictogram
+    })), weblink.name)))))), 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", {
       /* @ts-ignore */
       crossorigin: "anonymous", 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" })))));
@@ -422,7 +496,7 @@ export class GrwTrekDetail {
         "mutable": false,
         "complexType": {
           "original": "Trek",
-          "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; departure_city: string; arrival?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; cities?: string[]; information_desks?: number[]; children?: number[]; ratings?: number[]; ratings_description?: string; }",
+          "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; descent: number; departure: string; departure_city: string; arrival?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; cities?: string[]; information_desks?: number[]; children?: number[]; ratings?: number[]; ratings_description?: string; networks: number[]; web_links: Weblink[]; }",
           "references": {
             "Trek": {
               "location": "import",
@@ -437,6 +511,23 @@ export class GrwTrekDetail {
           "text": ""
         }
       },
+      "emergencyNumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "emergency-number",
+        "reflect": false
+      },
       "fontFamily": {
         "type": "string",
         "mutable": false,