@geotrekce/geotrek-rando-widget 0.0.21 → 0.2.1

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

@@ -1,6 +1,47 @@
-import { Host, h, getAssetPath } from '@stencil/core';
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Keyboard, FreeMode, Mousewheel } from 'swiper';
+import { translate } from 'i18n/i18n';
 import state, { onChange, reset } from 'store/store';
 import { formatDuration, formatLength, formatAscent } from 'utils/utils';
+const threshold = 0.5;
+const presentation = {
+  visible: true,
+  width: 120,
+  indicator: false,
+};
+const description = {
+  visible: false,
+  width: 120,
+  indicator: false,
+};
+const recommendations = {
+  visible: false,
+  width: 190,
+  indicator: false,
+};
+const sensitiveArea = {
+  visible: false,
+  width: 160,
+  indicator: false,
+};
+const informationPlaces = {
+  visible: false,
+  width: 200,
+  indicator: false,
+};
+const pois = {
+  visible: false,
+  width: 120,
+  indicator: false,
+};
+const options = {
+  presentation,
+  description,
+  recommendations,
+  sensitiveArea,
+  informationPlaces,
+  pois,
+};
 export class GrwTrekDetail {
   constructor() {
     this.currentTrek = undefined;
@@ -12,15 +53,135 @@ export class GrwTrekDetail {
     this.sources = undefined;
     this.accessibilities = undefined;
     this.accessibilityLevel = undefined;
+    this.displayFullscreen = false;
+    this.cities = undefined;
+    this.options = undefined;
     this.trek = undefined;
-    this.colorPrimary = '#6b0030';
-    this.colorPrimaryShade = '#4a0021';
-    this.colorPrimaryTint = '#974c6e';
+    this.colorPrimaryApp = '#6b0030';
+    this.colorOnSurface = '#49454e';
+    this.colorPrimaryContainer = '#eaddff';
+    this.colorOnPrimaryContainer = '#21005e';
+    this.colorSecondaryContainer = '#e8def8';
+    this.colorOnSecondaryContainer = '#1d192b';
+    this.colorBackground = '#fef7ff';
     this.resetStoreOnDisconnected = true;
+    this.weather = false;
+    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();
+    };
+    this.swiperPois = new Swiper(this.swiperPoisRef, {
+      modules: [FreeMode, Mousewheel],
+      slidesPerView: 1.5,
+      spaceBetween: 20,
+      grabCursor: true,
+      freeMode: true,
+      mousewheel: { forceToAxis: true },
+      breakpointsBase: 'container',
+      breakpoints: {
+        '540': {
+          slidesPerView: 2.5,
+        },
+      },
+    });
+    this.swiperInformationDesks = new Swiper(this.swiperInformationDesksRef, {
+      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 intersectionRatio = entries[0].intersectionRatio >= threshold;
+        if (intersectionRatio) {
+          this.options = Object.assign(Object.assign({}, this.defaultOptions), { presentation: Object.assign(Object.assign({}, this.defaultOptions.presentation), { indicator: intersectionRatio }) });
+        }
+      }, { threshold });
+      presentationObserver.observe(this.presentationRef);
+    }
+    if (this.descriptionRef) {
+      const descriptionReferenceObserver = new IntersectionObserver(entries => {
+        const intersectionRatio = entries[0].intersectionRatio >= threshold;
+        this.descriptionReferenceIsInViewport.emit(intersectionRatio);
+        if (intersectionRatio) {
+          this.options = Object.assign(Object.assign({}, this.defaultOptions), { description: Object.assign(Object.assign({}, this.defaultOptions.description), { indicator: intersectionRatio }) });
+        }
+      }, { threshold });
+      descriptionReferenceObserver.observe(this.descriptionRef);
+    }
+    if (this.recommendationRef) {
+      const recommendationsObserver = new IntersectionObserver(entries => {
+        const intersectionRatio = entries[0].intersectionRatio >= threshold;
+        if (intersectionRatio) {
+          this.options = Object.assign(Object.assign({}, this.defaultOptions), { recommendations: Object.assign(Object.assign({}, this.defaultOptions.recommendations), { indicator: intersectionRatio }) });
+        }
+      }, { threshold });
+      recommendationsObserver.observe(this.recommendationRef);
+    }
+    if (this.parkingRef) {
+      const parkingObserver = new IntersectionObserver(entries => {
+        const intersectionRatio = entries[0].intersectionRatio >= threshold;
+        this.parkingIsInViewport.emit(intersectionRatio);
+      }, { threshold });
+      parkingObserver.observe(this.parkingRef);
+    }
+    if (this.sensitiveAreaRef) {
+      const sensitiveAreaRefObserver = new IntersectionObserver(entries => {
+        const intersectionRatio = entries[0].intersectionRatio >= threshold;
+        this.sensitiveAreaIsInViewport.emit(intersectionRatio);
+        if (intersectionRatio) {
+          this.options = Object.assign(Object.assign({}, this.defaultOptions), { sensitiveArea: Object.assign(Object.assign({}, this.defaultOptions.sensitiveArea), { indicator: intersectionRatio }) });
+        }
+      }, { threshold });
+      sensitiveAreaRefObserver.observe(this.sensitiveAreaRef);
+    }
+    if (this.informationDeskRef) {
+      const informationDeskObserver = new IntersectionObserver(entries => {
+        const intersectionRatio = entries[0].intersectionRatio >= threshold;
+        this.informationDeskIsInViewport.emit(intersectionRatio);
+        if (intersectionRatio) {
+          this.options = Object.assign(Object.assign({}, this.defaultOptions), { informationPlaces: Object.assign(Object.assign({}, this.defaultOptions.informationPlaces), { indicator: intersectionRatio }) });
+        }
+      }, { threshold });
+      informationDeskObserver.observe(this.informationDeskRef);
+    }
+    if (this.poiRef) {
+      const poiObserver = new IntersectionObserver(entries => {
+        const intersectionRatio = entries[0].intersectionRatio >= threshold;
+        this.poiIsInViewport.emit(intersectionRatio);
+        if (intersectionRatio) {
+          this.options = Object.assign(Object.assign({}, this.defaultOptions), { pois: Object.assign(Object.assign({}, this.defaultOptions.pois), { indicator: intersectionRatio }) });
+        }
+      }, { threshold });
+      poiObserver.observe(this.poiRef);
+    }
   }
   connectedCallback() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
     if (this.currentTrek) {
+      this.defaultOptions = this.handleOptions();
+      this.options = Object.assign(Object.assign({}, this.defaultOptions), { presentation: Object.assign(Object.assign({}, this.defaultOptions.presentation), { indicator: true }) });
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
       this.route = state.routes.find(route => route.id === this.currentTrek.route);
       this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
@@ -31,10 +192,13 @@ export class GrwTrekDetail {
       if (state.accessibilitiesLevel) {
         this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
       }
+      this.cities = this.currentTrek.cities.map(currentCity => { var _a; return (_a = state.cities.find(city => city.id === currentCity)) === null || _a === void 0 ? void 0 : _a.name; });
     }
     onChange('currentTrek', () => {
       this.currentTrek = this.trek ? this.trek : state.currentTrek;
       if (this.currentTrek) {
+        this.defaultOptions = this.handleOptions();
+        this.options = Object.assign(Object.assign({}, this.defaultOptions), { presentation: Object.assign(Object.assign({}, this.defaultOptions.presentation), { indicator: true }) });
         this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
         this.route = state.routes.find(route => route.id === this.currentTrek.route);
         this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
@@ -45,6 +209,7 @@ export class GrwTrekDetail {
         if (state.accessibilitiesLevel) {
           this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
         }
+        this.cities = this.currentTrek.cities.map(currentCity => { var _a; return (_a = state.cities.find(city => city.id === currentCity)) === null || _a === void 0 ? void 0 : _a.name; });
       }
     });
   }
@@ -53,17 +218,58 @@ export class GrwTrekDetail {
       reset();
     }
   }
+  handleOptions() {
+    return Object.assign(Object.assign({}, options), { presentation: Object.assign({}, presentation), description: Object.assign(Object.assign({}, description), { visible: Boolean(this.currentTrek.description) }), recommendations: Object.assign(Object.assign({}, recommendations), { visible: Boolean(this.currentTrek.advice || 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) }) });
+  }
+  handleFullscreen() {
+    if (this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].url) {
+      this.swiperImagesRef.requestFullscreen();
+    }
+  }
+  handleIndicatorSelectedTrekOption() {
+    let previousVisibleOptions = 0;
+    let currentOption;
+    let previousWidthOptions = 0;
+    const options = Object.values(this.options);
+    let index = 0;
+    while (!currentOption && index < options.length) {
+      if (options[index].indicator) {
+        currentOption = options[index];
+      }
+      else {
+        if (options[index].visible) {
+          previousVisibleOptions += 1;
+          previousWidthOptions += options[index].width;
+        }
+      }
+      index++;
+    }
+    return `${previousWidthOptions + 16 * previousVisibleOptions - currentOption.width / 2}px`;
+  }
+  handleScrollTo(element) {
+    this.trekDetailContainerRef.scrollTo({ top: element.offsetTop - 48 });
+  }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
-    const durationImageSrc = getAssetPath(`assets/duration.svg`);
-    const lengthImageSrc = getAssetPath(`assets/length.svg`);
-    const ascentImageSrc = getAssetPath(`assets/ascent.svg`);
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-shade': this.colorPrimaryShade, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-detail-container" }, h("div", { class: "name" }, this.currentTrek.name), this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].url && (h("img", { class: "image", src: this.currentTrek.attachments[0].url, loading: "lazy" })), 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("img", { src: durationImageSrc }), 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("img", { src: lengthImageSrc }), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("img", { src: ascentImageSrc }), 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: "downloads-container" }, h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), h("a", { href: `${this.currentTrek.kml}` }, "KML"), h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), this.themes.length > 0 && (h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label))))), 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 }), this.currentTrek.description && (h("div", { class: "description-container" }, h("div", { class: "description-title" }, "Description"), h("div", { class: "description", innerHTML: this.currentTrek.description }))), this.currentTrek.departure && (h("div", { class: "departure-container" }, h("div", { class: "departure-title" }, "D\u00E9part :\u00A0"), h("div", { innerHTML: this.currentTrek.departure }))), this.currentTrek.arrival && (h("div", { class: "arrival-container" }, h("div", { class: "arrival-title" }, "Arriv\u00E9e :\u00A0"), h("div", { innerHTML: this.currentTrek.arrival }))), this.currentTrek.altimetric_profile && (h("div", { class: "altimetric-profile-container" }, h("div", { class: "altimetric-profile-title" }, "Profil altim\u00E9trique"), h("img", { src: this.currentTrek.altimetric_profile.endsWith('.json')
-        ? this.currentTrek.altimetric_profile.replace('.json', '.svg')
-        : `${this.currentTrek.altimetric_profile}?format=svg` }))), this.currentTrek.access && (h("div", { class: "access-container" }, h("div", { class: "access-title" }, "Acc\u00E8s routier"), h("div", { class: "access", innerHTML: this.currentTrek.access }))), this.currentTrek.public_transport && (h("div", { class: "public-transport-container" }, h("div", { class: "public-transport-title" }, "Transport"), h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport }))), (this.currentTrek.advice || this.labels.length > 0) && (h("div", { class: "advice-container" }, h("div", { class: "advice-title" }, "Recommandations"), this.currentTrek.advice && 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", { class: "advised-parking-container" }, h("div", { class: "advised-parking-title" }, "Parking conseill\u00E9"), h("div", { class: "advised_parking", innerHTML: this.currentTrek.advised_parking }))), this.currentTrek.gear && (h("div", { class: "gear-container" }, h("div", { class: "gear-title" }, "\u00C9quipements"), h("div", { class: "gear", innerHTML: this.currentTrek.gear }))), state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", { class: "sensitive-areas-container" }, h("div", { class: "sensitive-areas-title" }, "Zones de sensibilit\u00E9 environnementale"), state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))), state.currentInformationDesks && state.currentInformationDesks.length > 0 && (h("div", { class: "information-desks-container" }, h("div", { class: "information-desks-title" }, "Lieux de renseignement"), state.currentInformationDesks.map(informationDesk => (h("grw-information-desk-detail", { informationDesk: informationDesk }))))), (this.currentTrek.disabled_infrastructure ||
+    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',
+      } }, 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.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)), 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", 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", { class: "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", { class: "material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("span", { class: "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", { class: "material-symbols-outlined" }, "download"), "GPX"), h("a", { href: `${this.currentTrek.kml}` }, h("span", { class: "material-symbols-outlined" }, "download"), "KML"), h("a", { href: `${this.currentTrek.pdf}` }, h("span", { class: "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" }), 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 && (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", { class: "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-detail", { informationDesk: informationDesk }))))))))), (this.currentTrek.disabled_infrastructure ||
       (this.accessibilities && this.accessibilities.length > 0) ||
       this.currentTrek.accessibility_level ||
       this.currentTrek.accessibility_slope ||
@@ -71,10 +277,9 @@ export class GrwTrekDetail {
       this.currentTrek.accessibility_signage ||
       this.currentTrek.accessibility_covering ||
       this.currentTrek.accessibility_exposure ||
-      this.currentTrek.accessibility_advice) && (h("div", { class: "accessibilities-container" }, h("div", { class: "accessibilities-title" }, "Accessibilit\u00E9"), 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" }, "Niveau d'accessibilit\u00E9"), h("div", { innerHTML: this.accessibilityLevel.name }))), this.currentTrek.accessibility_slope && (h("div", { class: "accessibility-slope-container" }, h("div", { class: "accessibility-slope-title" }, "Pente"), h("div", { innerHTML: this.currentTrek.accessibility_slope }))), this.currentTrek.accessibility_width && (h("div", { class: "accessibility-width-container" }, h("div", { class: "accessibility-width-title" }, "Largeur"), h("div", { innerHTML: this.currentTrek.accessibility_width }))), this.currentTrek.accessibility_signage && (h("div", { class: "accessibility-signage-container" }, h("div", { class: "accessibility-signage-title" }, "Pente"), h("div", { innerHTML: this.currentTrek.accessibility_signage }))), this.currentTrek.accessibility_covering && (h("div", { class: "accessibility-covering-container" }, h("div", { class: "accessibility-covering-title" }, "Rev\u00EAtement"), h("div", { innerHTML: this.currentTrek.accessibility_covering }))), this.currentTrek.accessibility_exposure && (h("div", { class: "accessibility-exposure-container" }, h("div", { class: "accessibility-exposure-title" }, "Exposition"), h("div", { innerHTML: this.currentTrek.accessibility_exposure }))), this.currentTrek.accessibility_advice && (h("div", { class: "accessibility-advice-container" }, h("div", { class: "accessibility-advice-title" }, "Conseils"), h("div", { innerHTML: this.currentTrek.accessibility_advice }))))), state.currentPois && state.currentPois.length > 0 && (h("div", { class: "pois-container" }, h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"), state.currentPois.map(poi => (h("grw-poi-detail", { poi: poi }))))), this.currentTrek.source && this.currentTrek.source.length > 0 && (h("div", { class: "source-container" }, h("div", { class: "source-title" }, "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 })))))))))));
+      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-detail", { poi: poi }))))))))), 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"; }
   static get originalStyleUrls() {
     return {
       "$": ["grw-trek-detail.scss"]
@@ -92,7 +297,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; altimetric_profile?: 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; }",
+          "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[]; }",
           "references": {
             "Trek": {
               "location": "import",
@@ -107,7 +312,7 @@ export class GrwTrekDetail {
           "text": ""
         }
       },
-      "colorPrimary": {
+      "colorPrimaryApp": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -121,11 +326,83 @@ export class GrwTrekDetail {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary",
+        "attribute": "color-primary-app",
         "reflect": false,
         "defaultValue": "'#6b0030'"
       },
-      "colorPrimaryShade": {
+      "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": {
@@ -139,11 +416,11 @@ export class GrwTrekDetail {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary-shade",
+        "attribute": "color-on-secondary-container",
         "reflect": false,
-        "defaultValue": "'#4a0021'"
+        "defaultValue": "'#1d192b'"
       },
-      "colorPrimaryTint": {
+      "colorBackground": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -157,9 +434,9 @@ export class GrwTrekDetail {
           "tags": [],
           "text": ""
         },
-        "attribute": "color-primary-tint",
+        "attribute": "color-background",
         "reflect": false,
-        "defaultValue": "'#974c6e'"
+        "defaultValue": "'#fef7ff'"
       },
       "resetStoreOnDisconnected": {
         "type": "boolean",
@@ -178,6 +455,42 @@ export class GrwTrekDetail {
         "attribute": "reset-store-on-disconnected",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "weather": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "weather",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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"
       }
     };
   }
@@ -191,8 +504,89 @@ export class GrwTrekDetail {
       "labels": {},
       "sources": {},
       "accessibilities": {},
-      "accessibilityLevel": {}
+      "accessibilityLevel": {},
+      "displayFullscreen": {},
+      "cities": {},
+      "options": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "descriptionReferenceIsInViewport",
+        "name": "descriptionReferenceIsInViewport",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "parkingIsInViewport",
+        "name": "parkingIsInViewport",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "sensitiveAreaIsInViewport",
+        "name": "sensitiveAreaIsInViewport",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "informationDeskIsInViewport",
+        "name": "informationDeskIsInViewport",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "poiIsInViewport",
+        "name": "poiIsInViewport",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
 }
 //# sourceMappingURL=grw-trek-detail.js.map