@geotrekce/geotrek-rando-widget 0.3.3 → 0.3.5

package/dist/collection/components/grw-touristic-content/grw-touristic-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grw-touristic-content.js","sourceRoot":"","sources":["../../../src/components/grw-touristic-content/grw-touristic-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Host, Prop, State, getAssetPath, h } from '@stencil/core';\nimport state from 'store/store';\nimport Swiper, { Keyboard, Navigation, Pagination } from 'swiper';\nimport { TouristicContent } from 'types/types';\n\n@Component({\n  tag: 'grw-touristic-content',\n  styleUrl: 'grw-touristic-content.scss',\n  shadow: true,\n})\nexport class GrwTouristicContent {\n  swiperTouristicContent?: Swiper;\n  swiperTouristicContentRef?: HTMLDivElement;\n  prevElTouristicContentRef?: HTMLDivElement;\n  nextElTouristicContentRef?: HTMLDivElement;\n  paginationElTouristicContentRef?: HTMLDivElement;\n  @Prop() touristicContent: TouristicContent;\n  @State() displayFullscreen = false;\n\n  componentDidLoad() {\n    this.swiperTouristicContent = new Swiper(this.swiperTouristicContentRef, {\n      modules: [Navigation, Pagination, Keyboard],\n      navigation: {\n        prevEl: this.prevElTouristicContentRef,\n        nextEl: this.nextElTouristicContentRef,\n      },\n      pagination: { el: this.paginationElTouristicContentRef },\n      allowTouchMove: false,\n      keyboard: false,\n    });\n    this.swiperTouristicContentRef.onfullscreenchange = () => {\n      this.displayFullscreen = !this.displayFullscreen;\n      if (this.displayFullscreen) {\n        this.swiperTouristicContent.keyboard.enable();\n      } else {\n        this.swiperTouristicContent.keyboard.disable();\n      }\n    };\n  }\n\n  handleFullscreen() {\n    if (this.touristicContent.attachments && this.touristicContent.attachments[0] && this.touristicContent.attachments[0].url) {\n      this.swiperTouristicContentRef.requestFullscreen();\n    }\n  }\n  render() {\n    const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);\n    const touristicContentCategory = state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === this.touristicContent.category);\n    return (\n      <Host>\n        <div class=\"touristic-content-type-img-container\">\n          {/* <img class=\"touristic-content-type\" src={`${state.poiTypes.find(poiType => poiType.id === this.poi.type)?.pictogram}`} /> */}\n          <div class=\"swiper\" ref={el => (this.swiperTouristicContentRef = el)}>\n            <div class=\"swiper-wrapper\">\n              {this.touristicContent.attachments.length > 0 ? (\n                this.touristicContent.attachments\n                  .filter(attachment => attachment.type === 'image')\n                  .map(attachment => (\n                    <div class=\"swiper-slide\">\n                      <img\n                        class={`touristic-content-img${this.displayFullscreen ? ' img-fullscreen' : ''}`}\n                        src={this.displayFullscreen ? attachment.url : attachment.thumbnail}\n                        loading=\"lazy\"\n                        onClick={() => this.handleFullscreen()}\n                      />\n                    </div>\n                  ))\n              ) : (\n                <div class=\"swiper-slide\">\n                  <img class=\"default-touristic-content-img\" src={defaultImageSrc} loading=\"lazy\" />\n                </div>\n              )}\n            </div>\n            <div class=\"swiper-pagination\" ref={el => (this.paginationElTouristicContentRef = el)}></div>\n            <div class=\"swiper-button-prev\" ref={el => (this.prevElTouristicContentRef = el)}></div>\n            <div class=\"swiper-button-next\" ref={el => (this.nextElTouristicContentRef = el)}></div>\n          </div>\n        </div>\n        <div class=\"touristic-content-sub-container\">\n          <div class=\"touristic-content-category-container\">\n            <img src={touristicContentCategory.pictogram} />\n            <div class=\"touristic-content-category-name\">{touristicContentCategory.label}</div>\n          </div>\n          <div class=\"touristic-content-name\">{this.touristicContent.name}</div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -109,7 +109,7 @@
 .trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label span {
   font-size: 24px;
   width: 24px;
-  height: auto;
+  height: 24px;
   margin-right: 8px;
 }
 .trek-card-container .sub-container .icons-labels-container .row .practice img,
@@ -122,7 +122,8 @@
 }
 
 .trek-card-container {
-  width: 350px;
+  width: 100%;
+  max-width: 350px;
 }
 .trek-card-container .image {
   width: 100%;

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

@@ -45,10 +45,10 @@ export class GrwTrekCard {
     }
   }
   handleMouseOver() {
-    !this.isStep && this.cardTrekMouseOver.emit(this.currentTrek.id);
+    this.cardTrekMouseOver.emit(this.currentTrek.id);
   }
   handleMouseLeave() {
-    !this.isStep && this.cardTrekMouseLeave.emit();
+    this.cardTrekMouseLeave.emit();
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -60,13 +60,13 @@ export class GrwTrekCard {
         '--color-on-secondary-container': this.colorOnSecondaryContainer,
         '--color-surface-container-low': this.colorSurfaceContainerLow,
       } }, this.currentTrek && (h("div", { class: this.isStep
-        ? 'trek-card-container trek-step-card'
+        ? `trek-card-container trek-step-card${state.selectedStepId === this.currentTrek.id ? ' selected-trek-card' : ''}`
         : this.isLargeView
           ? `trek-card-large-view-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`
-          : `trek-card-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`, onClick: () => this.trekCardPress.emit(this.currentTrek.id) }, this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 0 && (h("img", { class: "image", src: `${this.currentTrek.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`, loading: "lazy" })), h("div", { class: "sub-container" }, this.departureCity && h("div", { class: "departure" }, this.departureCity.name), h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label)))), h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_b = this.difficulty) === null || _b === void 0 ? void 0 : _b.pictogram) && h("img", { src: this.difficulty.pictogram }), (_c = this.difficulty) === null || _c === void 0 ? void 0 :
-      _c.label), h("div", { class: "icon-label duration" }, h("span", { class: "material-symbols material-symbols-outlined" }, "timelapse"), formatDuration(this.currentTrek.duration))), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("span", { class: "material-symbols material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("span", { class: "material-symbols material-symbols-outlined" }, "moving"), formatAscent(this.currentTrek.ascent))), h("div", { class: "row" }, 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 :
+          : `trek-card-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`, onClick: () => this.trekCardPress.emit(this.currentTrek.id) }, this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 0 && (h("img", { class: "image", src: `${this.currentTrek.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`, loading: "lazy" })), h("div", { class: "sub-container" }, this.departureCity && h("div", { class: "departure" }, this.departureCity.name), h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), !this.isStep && (h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label))))), h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_b = this.difficulty) === null || _b === void 0 ? void 0 : _b.pictogram) && h("img", { src: this.difficulty.pictogram }), (_c = this.difficulty) === null || _c === void 0 ? void 0 :
+      _c.label), h("div", { class: "icon-label duration" }, h("span", { class: "material-symbols material-symbols-outlined" }, "timelapse"), formatDuration(this.currentTrek.duration))), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("span", { class: "material-symbols material-symbols-outlined" }, "open_in_full"), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("span", { class: "material-symbols material-symbols-outlined" }, "moving"), formatAscent(this.currentTrek.ascent))), !this.isStep && (h("div", { class: "row" }, 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: "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))))))));
+      _g.name)))))))));
   }
   static get is() { return "grw-trek-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/grw-trek-card/grw-trek-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"grw-trek-card.js","sourceRoot":"","sources":["../../../src/components/grw-trek-card/grw-trek-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\nimport state, { onChange, reset } from 'store/store';\nimport { City, Difficulty, Practice, Route, Themes, Trek } from 'types/types';\nimport { formatDuration, formatLength, formatAscent } from 'utils/utils';\n\n@Component({\n  tag: 'grw-trek-card',\n  styleUrl: 'grw-trek-card.scss',\n  shadow: true,\n})\nexport class GrwTrekCard {\n  @Event() trekCardPress: EventEmitter<number>;\n  @State() currentTrek: Trek;\n  @State() difficulty: Difficulty;\n  @State() route: Route;\n  @State() practice: Practice;\n  @State() themes: Themes;\n  @State() departureCity: City;\n  @Prop() trek: Trek;\n  @Prop() colorPrimaryApp = '#6b0030';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n  @Prop() isLargeView = false;\n  @Prop() resetStoreOnDisconnected = true;\n  @Prop() isStep: false;\n\n  @Event() cardTrekMouseOver: EventEmitter<number>;\n  @Event() cardTrekMouseLeave: EventEmitter;\n\n  connectedCallback() {\n    this.currentTrek = this.trek ? this.trek : state.currentTrek;\n    if (this.currentTrek) {\n      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n      this.route = state.routes.find(route => route.id === this.currentTrek.route);\n      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n      this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n    }\n    onChange('currentTrek', () => {\n      this.currentTrek = this.trek ? this.trek : state.currentTrek;\n      if (this.currentTrek) {\n        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n        this.route = state.routes.find(route => route.id === this.currentTrek.route);\n        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n        this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.resetStoreOnDisconnected) {\n      reset();\n    }\n  }\n\n  @Listen('mouseover')\n  handleMouseOver() {\n    !this.isStep && this.cardTrekMouseOver.emit(this.currentTrek.id);\n  }\n\n  @Listen('mouseleave')\n  handleMouseLeave() {\n    !this.isStep && this.cardTrekMouseLeave.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          'width': this.isLargeView ? '100%' : 'auto',\n          '--color-primary-app': this.colorPrimaryApp,\n          '--color-on-surface': this.colorOnSurface,\n          '--color-secondary-container': this.colorSecondaryContainer,\n          '--color-on-secondary-container': this.colorOnSecondaryContainer,\n          '--color-surface-container-low': this.colorSurfaceContainerLow,\n        }}\n      >\n        {this.currentTrek && (\n          <div\n            class={\n              this.isStep\n                ? 'trek-card-container trek-step-card'\n                : this.isLargeView\n                ? `trek-card-large-view-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`\n                : `trek-card-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`\n            }\n            onClick={() => this.trekCardPress.emit(this.currentTrek.id)}\n          >\n            {this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 0 && (\n              <img class=\"image\" src={`${this.currentTrek.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`} loading=\"lazy\" />\n            )}\n            <div class=\"sub-container\">\n              {this.departureCity && <div class=\"departure\">{this.departureCity.name}</div>}\n              <div class=\"name\">{this.currentTrek?.name}</div>\n              <div class=\"themes-container\">\n                {this.themes.map(theme => (\n                  <div class=\"theme\">{theme.label}</div>\n                ))}\n              </div>\n              <div class=\"icons-labels-container\">\n                <div class=\"row\">\n                  <div class=\"icon-label difficulty\">\n                    {this.difficulty?.pictogram && <img src={this.difficulty.pictogram} />}\n                    {this.difficulty?.label}\n                  </div>\n                  <div class=\"icon-label duration\">\n                    <span class=\"material-symbols material-symbols-outlined\">timelapse</span>\n                    {formatDuration(this.currentTrek.duration)}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"icon-label length\">\n                    <span class=\"material-symbols material-symbols-outlined\">open_in_full</span>\n                    {formatLength(this.currentTrek.length_2d)}\n                  </div>\n                  <div class=\"icon-label ascent\">\n                    <span class=\"material-symbols material-symbols-outlined\">moving</span>\n                    {formatAscent(this.currentTrek.ascent)}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"icon-label route\">\n                    {this.route?.pictogram && <img src={this.route.pictogram} />}\n                    {this.route?.route}\n                  </div>\n                  <div class=\"icon-label practice\">\n                    {this.practice?.pictogram && <img src={this.practice.pictogram} />}\n                    {this.practice?.name}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"grw-trek-card.js","sourceRoot":"","sources":["../../../src/components/grw-trek-card/grw-trek-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State, Listen } from '@stencil/core';\nimport state, { onChange, reset } from 'store/store';\nimport { City, Difficulty, Practice, Route, Themes, Trek } from 'types/types';\nimport { formatDuration, formatLength, formatAscent } from 'utils/utils';\n\n@Component({\n  tag: 'grw-trek-card',\n  styleUrl: 'grw-trek-card.scss',\n  shadow: true,\n})\nexport class GrwTrekCard {\n  @Event() trekCardPress: EventEmitter<number>;\n  @State() currentTrek: Trek;\n  @State() difficulty: Difficulty;\n  @State() route: Route;\n  @State() practice: Practice;\n  @State() themes: Themes;\n  @State() departureCity: City;\n  @Prop() trek: Trek;\n  @Prop() colorPrimaryApp = '#6b0030';\n  @Prop() colorOnSurface = '#49454e';\n  @Prop() colorSecondaryContainer = '#e8def8';\n  @Prop() colorOnSecondaryContainer = '#1d192b';\n  @Prop() colorSurfaceContainerLow = '#f7f2fa';\n  @Prop() isLargeView = false;\n  @Prop() resetStoreOnDisconnected = true;\n  @Prop() isStep: false;\n\n  @Event() cardTrekMouseOver: EventEmitter<number>;\n  @Event() cardTrekMouseLeave: EventEmitter;\n\n  connectedCallback() {\n    this.currentTrek = this.trek ? this.trek : state.currentTrek;\n    if (this.currentTrek) {\n      this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n      this.route = state.routes.find(route => route.id === this.currentTrek.route);\n      this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n      this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n    }\n    onChange('currentTrek', () => {\n      this.currentTrek = this.trek ? this.trek : state.currentTrek;\n      if (this.currentTrek) {\n        this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);\n        this.route = state.routes.find(route => route.id === this.currentTrek.route);\n        this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);\n        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));\n        this.departureCity = state.cities.find(city => city.id === this.currentTrek.departure_city);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.resetStoreOnDisconnected) {\n      reset();\n    }\n  }\n\n  @Listen('mouseover')\n  handleMouseOver() {\n    this.cardTrekMouseOver.emit(this.currentTrek.id);\n  }\n\n  @Listen('mouseleave')\n  handleMouseLeave() {\n    this.cardTrekMouseLeave.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          'width': this.isLargeView ? '100%' : 'auto',\n          '--color-primary-app': this.colorPrimaryApp,\n          '--color-on-surface': this.colorOnSurface,\n          '--color-secondary-container': this.colorSecondaryContainer,\n          '--color-on-secondary-container': this.colorOnSecondaryContainer,\n          '--color-surface-container-low': this.colorSurfaceContainerLow,\n        }}\n      >\n        {this.currentTrek && (\n          <div\n            class={\n              this.isStep\n                ? `trek-card-container trek-step-card${state.selectedStepId === this.currentTrek.id ? ' selected-trek-card' : ''}`\n                : this.isLargeView\n                ? `trek-card-large-view-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`\n                : `trek-card-container${state.selectedTrekId === this.currentTrek.id ? ' selected-trek-card' : ''}`\n            }\n            onClick={() => this.trekCardPress.emit(this.currentTrek.id)}\n          >\n            {this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 0 && (\n              <img class=\"image\" src={`${this.currentTrek.attachments.filter(attachment => attachment.type === 'image')[0].thumbnail}`} loading=\"lazy\" />\n            )}\n            <div class=\"sub-container\">\n              {this.departureCity && <div class=\"departure\">{this.departureCity.name}</div>}\n              <div class=\"name\">{this.currentTrek?.name}</div>\n              {!this.isStep && (\n                <div class=\"themes-container\">\n                  {this.themes.map(theme => (\n                    <div class=\"theme\">{theme.label}</div>\n                  ))}\n                </div>\n              )}\n              <div class=\"icons-labels-container\">\n                <div class=\"row\">\n                  <div class=\"icon-label difficulty\">\n                    {this.difficulty?.pictogram && <img src={this.difficulty.pictogram} />}\n                    {this.difficulty?.label}\n                  </div>\n                  <div class=\"icon-label duration\">\n                    <span class=\"material-symbols material-symbols-outlined\">timelapse</span>\n                    {formatDuration(this.currentTrek.duration)}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"icon-label length\">\n                    <span class=\"material-symbols material-symbols-outlined\">open_in_full</span>\n                    {formatLength(this.currentTrek.length_2d)}\n                  </div>\n                  <div class=\"icon-label ascent\">\n                    <span class=\"material-symbols material-symbols-outlined\">moving</span>\n                    {formatAscent(this.currentTrek.ascent)}\n                  </div>\n                </div>\n                {!this.isStep && (\n                  <div class=\"row\">\n                    <div class=\"icon-label route\">\n                      {this.route?.pictogram && <img src={this.route.pictogram} />}\n                      {this.route?.route}\n                    </div>\n                    <div class=\"icon-label practice\">\n                      {this.practice?.pictogram && <img src={this.practice.pictogram} />}\n                      {this.practice?.name}\n                    </div>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -591,6 +591,10 @@ grw-trek-detail {
   width: 240px;
   background-size: 120px 100%;
 }
+.trek-options .steps.selected-trek-option ~ .indicator-selected-trek-option {
+  width: 160px;
+  background-size: 80px 100%;
+}
 .trek-options .description.selected-trek-option ~ .indicator-selected-trek-option {
   width: 240px;
   background-size: 120px 100%;
@@ -611,10 +615,18 @@ grw-trek-detail {
   width: 240px;
   background-size: 120px 100%;
 }
+.trek-options .touristic-content.selected-trek-option ~ .indicator-selected-trek-option {
+  width: 240px;
+  background-size: 120px 100%;
+}
 .trek-options .presentation {
   min-width: 120px;
   width: 120px;
 }
+.trek-options .steps {
+  min-width: 80px;
+  width: 80px;
+}
 .trek-options .description {
   min-width: 120px;
   width: 120px;
@@ -635,6 +647,10 @@ grw-trek-detail {
   min-width: 120px;
   width: 120px;
 }
+.trek-options .touristic-content {
+  min-width: 120px;
+  width: 120px;
+}
 
 .trek-detail-container {
   font-family: "Roboto";
@@ -776,6 +792,7 @@ grw-trek-detail {
 .trek-detail-container .sensitive-areas-container,
 .trek-detail-container .source-container,
 .trek-detail-container .accessibilities-container,
+.trek-detail-container .parent-trek-container,
 .trek-detail-container .weather-container {
   padding: 0px 24px 0px 24px;
 }
@@ -794,7 +811,9 @@ grw-trek-detail {
 .trek-detail-container .source-container,
 .trek-detail-container .accessibilities-container,
 .trek-detail-container .weather-container,
-.trek-detail-container .step-container {
+.trek-detail-container .parent-trek-container,
+.trek-detail-container .step-container,
+.trek-detail-container .touristic-content-container {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
@@ -814,7 +833,9 @@ grw-trek-detail {
 .trek-detail-container .source-container a,
 .trek-detail-container .accessibilities-container a,
 .trek-detail-container .weather-container a,
-.trek-detail-container .step-container a {
+.trek-detail-container .parent-trek-container a,
+.trek-detail-container .step-container a,
+.trek-detail-container .touristic-content-container a {
   color: var(--color-primary-app);
 }
 .trek-detail-container .description-title,
@@ -829,19 +850,58 @@ grw-trek-detail {
 .trek-detail-container .pois-title,
 .trek-detail-container .source-title,
 .trek-detail-container .accessibilities-title,
-.trek-detail-container .step-title {
+.trek-detail-container .step-title,
+.trek-detail-container .parent-trek-title,
+.trek-detail-container .touristic-content-title {
   color: var(--color-on-surface);
   font-size: 22px;
   line-height: 28px;
   font-weight: 400;
   font-weight: bold;
-  margin-bottom: 16px;
 }
+.trek-detail-container .description-title,
+.trek-detail-container .altimetric-profile-title,
+.trek-detail-container .access-title,
+.trek-detail-container .public-transport-title,
+.trek-detail-container .advice-title,
+.trek-detail-container .advised-parking-title,
+.trek-detail-container .gear-title,
+.trek-detail-container .sensitive-areas-title,
 .trek-detail-container .information-desks-title,
 .trek-detail-container .pois-title,
+.trek-detail-container .source-title,
+.trek-detail-container .accessibilities-title,
+.trek-detail-container .parent-trek-title,
+.trek-detail-container .touristic-content-title {
+  margin-bottom: 16px;
+}
 .trek-detail-container .step-title {
+  margin-bottom: 12px;
+}
+.trek-detail-container .information-desks-title,
+.trek-detail-container .pois-title,
+.trek-detail-container .step-title,
+.trek-detail-container .touristic-content-title {
   padding: 0px 24px 0px 24px;
 }
+.trek-detail-container .parent-trek-title {
+  cursor: pointer;
+  user-select: none;
+  font-weight: 500;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-shadow: var(--elevation-0);
+  border: none;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 20px;
+  color: var(--color-primary);
+  background-color: transparent;
+}
+.trek-detail-container .parent-trek-title div {
+  margin-right: 4px;
+}
 
 .description-container .description ol {
   position: relative;
@@ -995,7 +1055,8 @@ grw-trek-detail {
 
 .swiper-information-desks,
 .swiper-pois,
-.swiper-step {
+.swiper-step,
+.swiper-touristic-content {
   padding-right: 32px;
   padding-left: 32px;
 }
@@ -1003,6 +1064,43 @@ grw-trek-detail {
 .swiper-step {
   padding-bottom: 4px;
 }
+.swiper-step .swiper-wrapper .swiper-slide {
+  counter-increment: stepPoint;
+  padding-top: 36px;
+}
+.swiper-step .swiper-wrapper .swiper-slide:first-child:before {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.swiper-step .swiper-wrapper .swiper-slide:before {
+  content: "";
+  position: absolute;
+  top: 6px;
+  height: 12px;
+  width: calc(100% + 20px);
+  background-color: var(--color-secondary-container);
+}
+.swiper-step .swiper-wrapper .swiper-slide:last-child:before {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  width: 100%;
+}
+.swiper-step .swiper-wrapper .swiper-slide:after {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  content: counter(stepPoint);
+  width: 24px;
+  height: 24px;
+  background: var(--color-primary-app);
+  border-radius: 12px;
+  font-weight: bold;
+  font-size: 0.8em;
+  color: white;
+  margin-left: calc(50% - 12px);
+  top: 0px;
+}
 
 .divider {
   margin: 16px;

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

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