@geotrekce/geotrek-rando-widget 0.3.6 → 0.4.0

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

@@ -30,7 +30,7 @@ grw-app {
 .large-view-header-container {
   background-color: var(--color-background);
   box-shadow: var(--elevation-2);
-  height: 64px;
+  height: var(--header-height);
 }
 .header-container .arrow-back-container,
 .large-view-header-container .arrow-back-container {
@@ -93,6 +93,10 @@ grw-app {
   font-size: 18px;
 }
 
+.header-detail {
+  height: 64px;
+}
+
 .large-view-header-container .handle-search-filters-container {
   justify-content: flex-start;
 }
@@ -130,12 +134,12 @@ grw-app {
 .content-container {
   position: relative;
   display: flex;
-  height: calc(100% - 64px);
+  height: calc(100% - var(--header-height));
   background-color: var(--color-background);
 }
 
 .content-treks {
-  height: calc(100% - 64px);
+  height: calc(100% - var(--header-height));
 }
 
 .content-trek {
@@ -144,8 +148,11 @@ grw-app {
 
 .app-treks-list-container,
 .app-trek-detail-container,
+.app-touristic-content-detail-container,
+.app-touristic-event-detail-container,
 .large-view-app-treks-list-container,
 .large-view-app-trek-detail-container {
+  max-width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -203,12 +210,15 @@ grw-app {
   width: 100%;
 }
 
-grw-treks-list {
-  max-height: calc(100vh - 64px);
+grw-treks-list,
+grw-touristic-contents-list,
+grw-touristic-content-detail,
+grw-touristic-event-detail {
+  max-height: calc(100vh - var(--header-height));
 }
 
 grw-trek-detail {
-  max-height: calc(100vh - 64px - 48px);
+  max-height: calc(100vh - var(--header-height) - 48px);
 }
 
 .app-map-container {
@@ -221,11 +231,55 @@ grw-trek-detail {
 }
 
 .large-view-app-treks-list-container,
-.large-view-app-trek-detail-container {
+.large-view-app-trek-detail-container,
+.large-view-app-touristic-content-detail-container,
+.large-view-app-touristic-event-detail-container {
   width: 50%;
 }
 
 .large-view-app-map-container {
   position: relative;
   width: 50%;
+}
+
+.segmented-buttons-container {
+  display: flex;
+  justify-content: center;
+  width: calc(100% - 32px);
+  height: 40px;
+  margin: 16px;
+  border: 1px solid var(--color-outline);
+  border-radius: 20px;
+  line-height: 20px;
+}
+.segmented-buttons-container .segment {
+  cursor: pointer;
+  user-select: none;
+  font-size: 14px;
+  font-weight: 500;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--color-on-surface-variant);
+  background-color: transparent;
+  border-radius: 0px;
+  min-width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.segmented-buttons-container .segment:first-child {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+.segmented-buttons-container .segment:not(:last-child) {
+  border-right: 1px solid var(--color-outline);
+}
+.segmented-buttons-container .segment:last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+.segmented-buttons-container .selected-segment {
+  color: var(--color-on-secondary-container);
+  background-color: var(--color-secondary-container);
 }

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

@@ -1,16 +1,23 @@
 import { Host, h } from '@stencil/core';
 import { translate } from 'i18n/i18n';
 import state, { onChange, reset } from 'store/store';
+import { handleTouristicContentsFiltersAndSearch, handleTreksFiltersAndSearch, touristicContentsFilters, treksFilters } from 'utils/utils';
 export class GrwApp {
   constructor() {
     this.largeViewSize = 1024;
     this.handlePopStateBind = this.handlePopState.bind(this);
     this.showTrek = false;
-    this.showTreksMap = false;
+    this.showTouristicContent = false;
+    this.showTouristicEvent = false;
+    this.showHomeMap = false;
     this.showTrekMap = false;
+    this.showTouristicContentMap = false;
+    this.showTouristicEventMap = false;
     this.showFilters = false;
     this.isLargeView = false;
     this.currentTrekId = undefined;
+    this.currentTouristicContentId = undefined;
+    this.currentTouristicEventId = undefined;
     this.appWidth = '100%';
     this.appHeight = '100vh';
     this.api = undefined;
@@ -48,8 +55,17 @@ export class GrwApp {
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
     this.useGradient = false;
+    this.treks = true;
+    this.touristicContents = false;
+    this.touristicEvents = false;
   }
   onTrekCardPress(event) {
+    this.currentTouristicContentId = null;
+    this.showTouristicContent = false;
+    state.currentTouristicContent = null;
+    this.currentTouristicEventId = null;
+    this.showTouristicEvent = false;
+    state.currentTouristicEvent = null;
     const parentTrek = state.parentTrekId ? state.parentTrekId : state.currentTrekSteps ? this.currentTrekId : null;
     state.currentTrek = null;
     this.currentTrekId = event.detail;
@@ -58,7 +74,7 @@ export class GrwApp {
     const url = new URL(window.location.toString());
     url.searchParams.set('trek', this.currentTrekId.toString());
     if (state.currentTrekSteps) {
-      url.searchParams.set('parentTrek', parentTrek.toString());
+      url.searchParams.set('parenttrek', parentTrek.toString());
     }
     window.history.pushState({}, '', url);
   }
@@ -69,7 +85,31 @@ export class GrwApp {
     this.showTrekMap = false;
     const url = new URL(window.location.toString());
     url.searchParams.set('trek', this.currentTrekId.toString());
-    url.searchParams.delete('parentTrek');
+    url.searchParams.delete('parenttrek');
+    window.history.pushState({}, '', url);
+  }
+  onTouristicContentCardPress(event) {
+    state.currentTrek = null;
+    this.currentTrekId = null;
+    this.showTrek = false;
+    this.currentTouristicContentId = event.detail;
+    this.showTouristicContent = true;
+    this.showTouristicContentMap = false;
+    const url = new URL(window.location.toString());
+    url.searchParams.delete('trek');
+    url.searchParams.set('touristiccontent', this.currentTouristicContentId.toString());
+    window.history.pushState({}, '', url);
+  }
+  onTouristiceEventCardPress(event) {
+    state.currentTrek = null;
+    this.currentTrekId = null;
+    this.showTrek = false;
+    this.currentTouristicEventId = event.detail;
+    this.showTouristicEvent = true;
+    this.showTouristicEventMap = false;
+    const url = new URL(window.location.toString());
+    url.searchParams.delete('trek');
+    url.searchParams.set('touristicevent', this.currentTouristicEventId.toString());
     window.history.pushState({}, '', url);
   }
   onWindowResize() {
@@ -84,14 +124,32 @@ export class GrwApp {
     window.dispatchEvent(new window.Event('resize'));
   }
   componentWillLoad() {
+    if (this.treks) {
+      state.mode = 'treks';
+    }
+    else if (this.touristicContents) {
+      state.mode = 'touristicContents';
+    }
     const url = new URL(window.location.toString());
     const trekParam = url.searchParams.get('trek');
-    const parentTrekId = url.searchParams.get('parentTrek');
+    const parentTrekId = url.searchParams.get('parenttrek');
+    const touristicContentParam = url.searchParams.get('touristiccontent');
+    const touristicEventParam = url.searchParams.get('touristicevent');
     if (trekParam) {
-      window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);
+      window.history.replaceState({ isInitialHistoryWithDetails: true }, '', url);
       state.parentTrekId = parentTrekId ? Number(parentTrekId) : null;
       this.currentTrekId = Number(trekParam);
-      this.showTrek = !this.showTrek;
+      this.showTrek = true;
+    }
+    else if (touristicContentParam) {
+      window.history.replaceState({ isInitialHistoryWithDetails: true }, '', url);
+      this.currentTouristicContentId = Number(touristicContentParam);
+      this.showTouristicContent = true;
+    }
+    else if (touristicEventParam) {
+      window.history.replaceState({ isInitialHistoryWithDetails: true }, '', url);
+      this.currentTouristicEventId = Number(touristicEventParam);
+      this.showTouristicEvent = true;
     }
   }
   componentDidLoad() {
@@ -99,34 +157,45 @@ export class GrwApp {
       if (state.trekNetworkError) {
         const urlRedirect = new URL(window.location.toString());
         urlRedirect.searchParams.delete('trek');
-        urlRedirect.searchParams.delete('parentTrek');
+        urlRedirect.searchParams.delete('parenttrek');
+        urlRedirect.searchParams.delete('touristiccontent');
+        urlRedirect.searchParams.delete('touristicevent');
         window.history.replaceState({}, '', urlRedirect);
-        this.onTrekDetailsClose();
+        this.onDetailsClose();
       }
     });
     window.addEventListener('popstate', this.handlePopStateBind, false);
     this.handleView();
   }
-  onTrekDetailsClose() {
+  onDetailsClose() {
+    this.currentTouristicContentId = null;
+    this.showTouristicContent = false;
+    this.showTouristicContentMap = false;
+    this.showTouristicEvent = false;
+    this.showTouristicEventMap = false;
+    state.currentTouristicContent = null;
+    state.currentTouristicEvent = null;
     state.currentTrek = null;
     state.currentTrekSteps = null;
     state.parentTrekId = null;
     this.currentTrekId = null;
-    this.showTrek = !this.showTrek;
+    this.showTrek = false;
   }
   handleView() {
     this.isLargeView = this.appElement.getBoundingClientRect().width >= this.largeViewSize;
-    this.showTreksMap = this.isLargeView;
+    this.showHomeMap = this.isLargeView;
     this.showTrekMap = this.isLargeView;
   }
   handleFilters() {
     this.showFilters = !this.showFilters;
   }
   handleBackButton() {
-    if (window.history.state && window.history.state.isInitialHistoryWithTrek) {
-      this.onTrekDetailsClose();
+    if (window.history.state && window.history.state.isInitialHistoryWithDetails) {
+      this.onDetailsClose();
       const url = new URL(window.location.toString());
       url.searchParams.delete('trek');
+      url.searchParams.delete('touristiccontent');
+      url.searchParams.delete('touristicevent');
       window.history.pushState({}, '', url);
     }
     else {
@@ -136,27 +205,93 @@ export class GrwApp {
   handlePopState() {
     const url = new URL(window.location.toString());
     const trekParam = Number(url.searchParams.get('trek'));
+    const touristicContentParam = url.searchParams.get('touristiccontent');
+    const touristicEventParam = url.searchParams.get('touristicevent');
     if (trekParam && this.currentTrekId !== trekParam) {
+      this.currentTouristicContentId = null;
+      this.showTouristicContent = false;
+      this.showTouristicEvent = false;
+      state.currentTouristicContent = null;
+      state.currentTouristicEvent = null;
       state.currentTrek = null;
       this.currentTrekId = trekParam;
       this.showTrek = true;
     }
-    else if (!trekParam) {
-      this.onTrekDetailsClose();
+    else if (!trekParam && !touristicContentParam && !touristicEventParam) {
+      this.onDetailsClose();
     }
   }
   handleShowMap() {
     if (this.currentTrekId) {
       this.showTrekMap = !this.showTrekMap;
     }
+    else if (this.showTouristicContent) {
+      this.showTouristicContentMap = !this.showTouristicContentMap;
+    }
+    else if (this.showTouristicEvent) {
+      this.showTouristicEventMap = !this.showTouristicEventMap;
+    }
     else {
-      this.showTreksMap = !this.showTreksMap;
+      this.showHomeMap = !this.showHomeMap;
     }
   }
+  getMapVisibilityIconButton() {
+    let mapIconButton;
+    if (this.showTrek) {
+      mapIconButton = this.showTrekMap ? 'summarize' : 'map';
+    }
+    else if (this.showTouristicContent) {
+      mapIconButton = this.showTouristicContentMap ? 'summarize' : 'map';
+    }
+    else if (this.showTouristicEvent) {
+      mapIconButton = this.showTouristicEventMap ? 'summarize' : 'map';
+    }
+    else {
+      mapIconButton = this.showHomeMap ? 'list' : 'map';
+    }
+    return mapIconButton;
+  }
+  getMapVisibilityLabelButton() {
+    let mapLabelButton;
+    if (this.showTrek) {
+      mapLabelButton = this.showTrekMap ? translate[state.language].showDetails : translate[state.language].showRoute;
+    }
+    else if (this.showTouristicContent) {
+      mapLabelButton = this.showTouristicContentMap ? translate[state.language].showDetails : translate[state.language].showMap;
+    }
+    else if (this.showTouristicEvent) {
+      mapLabelButton = this.showTouristicEventMap ? translate[state.language].showDetails : translate[state.language].showMap;
+    }
+    else {
+      mapLabelButton = this.showHomeMap ? translate[state.language].showList : translate[state.language].showMap;
+    }
+    return mapLabelButton;
+  }
   disconnectedCallback() {
     reset();
     window.removeEventListener('popstate', this.handlePopStateBind);
   }
+  changeMode(mode) {
+    state.searchValue = '';
+    if (mode === 'treks') {
+      treksFilters.forEach(filter => {
+        state[filter.property].forEach(currentFilter => (currentFilter.selected = false));
+      });
+      state.selectedActivitiesFilters = 0;
+      state.selectedThemesFilters = 0;
+      state.selectedLocationFilters = 0;
+      state.currentTreks = handleTreksFiltersAndSearch();
+    }
+    else if (mode === 'touristicContents') {
+      touristicContentsFilters.forEach(filter => {
+        state[filter.property].forEach(currentFilter => (currentFilter.selected = false));
+      });
+      state.selectedActivitiesFilters = 0;
+      state.selectedLocationFilters = 0;
+      state.currentTouristicContents = handleTouristicContentsFiltersAndSearch();
+    }
+    state.mode = mode;
+  }
   render() {
     return (h(Host, { style: {
         '--color-primary-app': this.colorPrimaryApp,
@@ -176,19 +311,31 @@ export class GrwApp {
         '--fab-color': this.fabColor,
         '--app-width': this.appWidth,
         '--app-height': this.appHeight,
-      } }, !state.currentTreks && !state.currentTrek && (h("div", { class: "init-loader-container" }, h("span", { class: "loader" }))), !this.showTrek && !state.treks && (h("grw-treks-provider", { api: this.api, languages: this.languages, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices })), this.showTrek && this.currentTrekId && !state.currentTrek && (h("grw-trek-provider", { api: this.api, languages: this.languages, "trek-id": this.currentTrekId })), (state.currentTreks || state.currentTrek) && (h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, !this.showTrek ? (h("div", { class: "handle-search-filters-container" }, h("div", { class: "handle-search-container" }, h("grw-search", null)), h("div", { class: "handle-filters-container" }, h("button", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined margin-right-icon" }, "filter_list"), translate[state.language].filter)))) : (h("div", { class: "arrow-back-container" }, h("button", { onClick: () => this.handleBackButton(), class: "arrow-back-icon" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "arrow_back"))))), h("div", { class: `content-container ${this.showTrek ? 'content-trek' : 'content-treks'}` }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "reset-store-on-disconnected": "false", "is-large-view": this.isLargeView, "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 })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { style: {
+        '--header-height': Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) > 1 ? '136px' : '64px',
+      } }, !state.currentTreks && !state.currentTrek && !state.currentTouristicContent && !state.currentTouristicEvent && !state.touristicContents && (h("div", { class: "init-loader-container" }, h("span", { class: "loader" }))), this.treks && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent && !state.treks && (h("grw-treks-provider", { api: this.api, languages: this.languages, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices })), this.showTrek && this.currentTrekId && !state.currentTrek && (h("grw-trek-provider", { api: this.api, languages: this.languages, "trek-id": this.currentTrekId })), this.showTouristicContent && this.currentTouristicContentId && (h("grw-touristic-content-card-provider", { api: this.api, languages: this.languages, "touristic-content-id": this.currentTouristicContentId })), this.showTouristicEvent && this.currentTouristicEventId && (h("grw-touristic-event-provider", { api: this.api, languages: this.languages, "touristic-event-id": this.currentTouristicEventId })), this.touristicContents && !state.touristicContents && !this.showTouristicContent && (h("grw-touristic-content-provider", { api: this.api, languages: this.languages })), (state.currentTreks || state.currentTrek || state.touristicContents || state.currentTouristicContent || state.currentTouristicEvent) && (h("div", { class: "app-container" }, h("div", { class: `${this.isLargeView ? 'large-view-header-container' : 'header-container'}${this.showTrek || this.showTouristicContent || this.showTouristicEvent ? ' header-detail' : ''}` }, Number(this.treks) + Number(this.touristicContents) + Number(this.touristicEvents) > 1 && !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent && (h("div", { class: "segmented-buttons-container" }, this.treks && (h("label", { class: `segment${state.mode === 'treks' ? ' selected-segment' : ''}`, onClick: () => this.changeMode('treks') }, translate[state.language].home.segment.treks)), this.touristicContents && (h("label", { class: `segment${state.mode === 'touristicContents' ? ' selected-segment' : ''}`, onClick: () => this.changeMode('touristicContents') }, translate[state.language].home.segment.touristicContents)))), !this.showTrek && !this.showTouristicContent && !this.showTouristicEvent ? (h("div", { class: "handle-search-filters-container" }, h("div", { class: "handle-search-container" }, h("grw-search", null)), h("div", { class: "handle-filters-container" }, h("button", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined margin-right-icon" }, "filter_list"), translate[state.language].filter)))) : (h("div", { class: "arrow-back-container" }, h("button", { onClick: () => this.handleBackButton(), class: "arrow-back-icon" }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, "arrow_back"))))), h("div", { class: `content-container ${this.showTrek ? 'content-trek' : 'content-treks'}` }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek || this.showTouristicContent || this.showTouristicEvent ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, state.mode === 'treks' && this.treks && (h("grw-treks-list", { "reset-store-on-disconnected": "false", "is-large-view": this.isLargeView, "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 })), state.mode === 'touristicContents' && this.touristicContents && (h("grw-touristic-contents-list", { "reset-store-on-disconnected": "false", "is-large-view": this.isLargeView, "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 }))), ((this.showTrek && !state.currentTrek) ||
+      (this.showTouristicContent && !state.currentTouristicContent) ||
+      (this.showTouristicEvent && !state.currentTouristicEvent)) && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { style: {
         visibility: (!this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',
         zIndex: !this.showTrekMap ? '1' : '0',
-      }, "reset-store-on-disconnected": "false", "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-surface-container-low": this.colorSurfaceContainerLow, "color-background": this.colorBackground, weather: this.weather, "is-large-view": this.isLargeView }))), h("grw-map", { "reset-store-on-disconnected": "false", class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: {
-        visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) || this.isLargeView ? 'visible' : 'hidden',
-        zIndex: this.showTrekMap ? '1' : '0',
-      }, center: this.center, zoom: this.zoom, "name-layer": this.nameLayer, "url-layer": this.urlLayer, "attribution-layer": this.attributionLayer, "color-primary-app": this.colorPrimaryApp, "color-on-surface": this.colorOnSurface, "color-primary-container": this.colorPrimaryContainer, "color-on-primary-container": this.colorOnPrimaryContainer, "color-background": this.colorBackground, "color-trek-line": this.colorTrekLine, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon, "is-large-view": this.isLargeView, "use-gradient": this.useGradient })), (!this.showTrek || (this.showTrek && state.currentTrek)) && (h("div", { class: "map-visibility-button-container" }, h("button", { onClick: () => this.handleShowMap(), class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, this.showTrek ? (this.showTrekMap ? 'summarize' : 'map') : this.showTreksMap ? 'list' : 'map'), this.showTrek
-      ? this.showTrekMap
-        ? translate[state.language].showDetails
-        : translate[state.language].showRoute
-      : this.showTreksMap
-        ? translate[state.language].showList
-        : translate[state.language].showMap))))), !this.showTrek && this.showFilters && h("grw-filters", { handleFilters: () => this.handleFilters() })));
+      }, "reset-store-on-disconnected": "false", "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-surface-container-low": this.colorSurfaceContainerLow, "color-background": this.colorBackground, weather: this.weather, "is-large-view": this.isLargeView }))), this.showTouristicContent && (h("div", { class: this.isLargeView ? 'large-view-app-touristic-content-detail-container' : 'app-touristic-content-detail-container' }, h("grw-touristic-content-detail", { style: {
+        visibility: !this.showTouristicContentMap || this.isLargeView ? 'visible' : 'hidden',
+        zIndex: !this.showTouristicContentMap ? '1' : '0',
+      }, "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-surface-container-low": this.colorSurfaceContainerLow, "color-background": this.colorBackground, "is-large-view": this.isLargeView }))), this.showTouristicEvent && (h("div", { class: this.isLargeView ? 'large-view-app-touristic-event-detail-container' : 'app-touristic-event-detail-container' }, h("grw-touristic-event-detail", { style: {
+        visibility: !this.showTouristicEventMap || this.isLargeView ? 'visible' : 'hidden',
+        zIndex: !this.showTouristicEventMap ? '1' : '0',
+      }, "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-surface-container-low": this.colorSurfaceContainerLow, "color-background": this.colorBackground, "is-large-view": this.isLargeView }))), h("grw-map", { "reset-store-on-disconnected": "false", class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: {
+        visibility: (this.showHomeMap && !this.showTrek) ||
+          (this.showTrekMap && this.showTrek) ||
+          (this.showTouristicContentMap && this.showTouristicContent) ||
+          (this.showTouristicEventMap && this.showTouristicEvent) ||
+          this.isLargeView
+          ? 'visible'
+          : 'hidden',
+        zIndex: this.showHomeMap || this.showTrekMap || this.showTouristicContentMap || this.showTouristicEventMap ? '1' : '0',
+      }, center: this.center, zoom: this.zoom, "name-layer": this.nameLayer, "url-layer": this.urlLayer, "attribution-layer": this.attributionLayer, "color-primary-app": this.colorPrimaryApp, "color-on-surface": this.colorOnSurface, "color-primary-container": this.colorPrimaryContainer, "color-on-primary-container": this.colorOnPrimaryContainer, "color-background": this.colorBackground, "color-trek-line": this.colorTrekLine, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon, "is-large-view": this.isLargeView, "use-gradient": this.useGradient })), ((!this.showTrek && !this.showTouristicContent && !this.showTouristicEvent) ||
+      (this.showTrek && state.currentTrek) ||
+      (this.showTouristicContent && state.currentTouristicContent) ||
+      (this.showTouristicEvent && state.currentTouristicEvent)) && (h("div", { class: "map-visibility-button-container" }, h("button", { onClick: () => this.handleShowMap(), class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("span", { translate: false, class: "material-symbols material-symbols-outlined" }, this.getMapVisibilityIconButton()), this.getMapVisibilityLabelButton()))))), !this.showTrek && this.showFilters && h("grw-filters", { handleFilters: () => this.handleFilters() })));
   }
   static get is() { return "grw-app"; }
   static get originalStyleUrls() {
@@ -854,17 +1001,77 @@ export class GrwApp {
         "attribute": "use-gradient",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "treks": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "treks",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "touristicContents": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "touristic-contents",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "touristicEvents": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "touristic-events",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
       "showTrek": {},
-      "showTreksMap": {},
+      "showTouristicContent": {},
+      "showTouristicEvent": {},
+      "showHomeMap": {},
       "showTrekMap": {},
+      "showTouristicContentMap": {},
+      "showTouristicEventMap": {},
       "showFilters": {},
       "isLargeView": {},
-      "currentTrekId": {}
+      "currentTrekId": {},
+      "currentTouristicContentId": {},
+      "currentTouristicEventId": {}
     };
   }
   static get elementRef() { return "appElement"; }
@@ -887,6 +1094,18 @@ export class GrwApp {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "touristicContentCardPress",
+        "method": "onTouristicContentCardPress",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "touristicEventCardPress",
+        "method": "onTouristiceEventCardPress",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "resize",
         "method": "onWindowResize",