@geotrekce/geotrek-rando-widget 0.3.5 → 0.4.0

package/dist/esm/grw-app.entry.js

@@ -1,23 +1,27 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-82644551.js';
-import { t as translate } from './i18n-16a29f6f.js';
-import { s as state, o as onChange, r as reset } from './store-6101ed72.js';
-import { f as filters, h as handleFiltersAndSearch } from './utils-83029b76.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-d5cacae4.js';
+import { t as translate } from './i18n-60e9fdd3.js';
+import { s as state, o as onChange, r as reset } from './store-032ab1f5.js';
+import { t as treksFilters, h as handleTreksFiltersAndSearch, a as touristicContentsFilters, b as handleTouristicContentsFiltersAndSearch } from './utils-b09ac7c9.js';
 
-const grwAppCss = ".material-symbols{font-family:\"Material Symbols Outlined\"}.material-symbols-outlined{font-variation-settings:\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48}grw-app{display:block;position:relative;width:var(--app-width);height:var(--app-height);font-family:\"Roboto\";color:var(--color-on-surface);overflow:hidden;line-height:initial;max-width:100dvw;max-height:100dvh}.app-container{position:relative;width:100%;height:100%;overflow:hidden}.header-container,.large-view-header-container{background-color:var(--color-background);-webkit-box-shadow:var(--elevation-2);box-shadow:var(--elevation-2);height:64px}.header-container .arrow-back-container,.large-view-header-container .arrow-back-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;margin:0px 16px}.header-container .arrow-back-container .arrow-back-icon,.large-view-header-container .arrow-back-container .arrow-back-icon{cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--color-on-surface);border:none;background-color:var(--color-background);border-radius:50%;height:48px;width:48px;padding:0px;text-align:left}.options-container{height:100%;position:absolute;width:100%;z-index:1100;top:0px}.handle-search-filters-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:0px 16px;height:64px}.handle-search-filters-container .handle-search-container{width:calc(50% + 48px);max-width:220px}.handle-search-filters-container .handle-filters-button{margin-left:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;background-color:var(--color-background);color:var(--color-on-surface);padding:12px 24px;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;gap:8px;white-space:nowrap;line-height:20px;letter-spacing:0.1000000015px;font-size:14px;font-weight:500;-webkit-box-shadow:var(--elevation-1);box-shadow:var(--elevation-1);-webkit-transition:-webkit-box-shadow 0.2s ease-in-out 0s;transition:-webkit-box-shadow 0.2s ease-in-out 0s;transition:box-shadow 0.2s ease-in-out 0s;transition:box-shadow 0.2s ease-in-out 0s, -webkit-box-shadow 0.2s ease-in-out 0s}.handle-search-filters-container .handle-filters-button span{font-size:18px}.large-view-header-container .handle-search-filters-container{-ms-flex-pack:start;justify-content:flex-start}.filters-container{background-color:var(--color-background);position:relative;width:100%;height:100%;z-index:1100}.filters-container .segmented-buttons-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:calc(100% - 32px);height:40px;margin:16px;border:1px solid var(--color-outline);border-radius:20px;line-height:20px}.filters-container .segmented-buttons-container .segment{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.filters-container .segmented-buttons-container .segment:first-child{border-top-left-radius:20px;border-bottom-left-radius:20px}.filters-container .segmented-buttons-container .segment:not(:last-child){border-right:1px solid var(--color-outline)}.filters-container .segmented-buttons-container .segment:last-child{border-top-right-radius:20px;border-bottom-right-radius:20px}.filters-container .segmented-buttons-container .selected-segment{color:var(--color-on-secondary-container);background-color:var(--color-secondary-container)}.filters-segment-container{overflow-y:scroll;padding-bottom:32px;max-height:calc(100% - 64px - 32px)}.back-filters-container{background-color:rgba(0, 0, 0, 0.5);width:100%;height:100%;position:absolute;z-index:1099}.divider{margin:16px;border-top:1px solid var(--color-outline)}.init-loader-container,.loader-container,.large-view-loader-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:100%;background-color:var(--color-background)}.init-loader-container .loader,.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-container);border-bottom-color:var(--color-on-primary-container);border-radius:50%;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:rotation 1s linear infinite;animation:rotation 1s linear infinite}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.content-container{position:relative;display:-ms-flexbox;display:flex;height:calc(100% - 64px);background-color:var(--color-background)}.content-treks{height:calc(100% - 64px)}.content-trek{height:100%}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;position:absolute;bottom:24px;z-index:4}.map-visibility-button-container .map-visibility-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;text-decoration:none;padding:16px;background-color:var(--color-primary-container);color:var(--color-on-primary-container);-webkit-box-shadow:var(--elevation-1);box-shadow:var(--elevation-1);border-radius:12px;height:56px;font-size:16px;width:unset}.map-visibility-button-container .map-visibility-button:hover{-webkit-box-shadow:var(--elevation-4);box-shadow:var(--elevation-4)}.map-visibility-button-container .map-visibility-button span{font-size:24px;margin-right:8px;color:var(--color-on-primary-container)}.init-loader-container,.loader-container{width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}grw-treks-list{max-height:calc(100vh - 64px)}grw-trek-detail{max-height:calc(100vh - 64px - 48px)}.app-map-container{width:100%;position:absolute}.large-view-loader-container{width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}.filters-options-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;height:64px;margin:0px 16px}.filters-options-container .filters-options-buttons-container{display:-ms-flexbox;display:flex}.filters-options-container .filters-options-buttons-container .filter-option-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;font-weight:500;margin:8px 0px 0px 8px;padding:8px 16px;height:32px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-shadow:var(--elevation-0);box-shadow:var(--elevation-0);border:none;-webkit-tap-highlight-color:transparent;line-height:20px;color:var(--color-primary);background-color:transparent}.segment-container{margin-bottom:64px}.filter-container:not(:last-child)::after{content:\"\";display:block;margin:16px;border-top:1px solid var(--color-outline)}";
+const grwAppCss = ".material-symbols{font-family:\"Material Symbols Outlined\"}.material-symbols-outlined{font-variation-settings:\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48}grw-app{display:block;position:relative;width:var(--app-width);height:var(--app-height);font-family:\"Roboto\";color:var(--color-on-surface);overflow:hidden;line-height:initial;max-width:100dvw;max-height:100dvh}.app-container{position:relative;width:100%;height:100%;overflow:hidden}.header-container,.large-view-header-container{background-color:var(--color-background);-webkit-box-shadow:var(--elevation-2);box-shadow:var(--elevation-2);height:var(--header-height)}.header-container .arrow-back-container,.large-view-header-container .arrow-back-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;margin:0px 16px}.header-container .arrow-back-container .arrow-back-icon,.large-view-header-container .arrow-back-container .arrow-back-icon{cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--color-on-surface);border:none;background-color:var(--color-background);border-radius:50%;height:48px;width:48px;padding:0px;text-align:left}.handle-search-filters-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:0px 16px;height:64px}.handle-search-filters-container .handle-search-container{width:calc(50% + 48px);max-width:220px}.handle-search-filters-container .handle-filters-button{margin-left:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;background-color:var(--color-background);color:var(--color-on-surface);padding:12px 24px;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;gap:8px;white-space:nowrap;line-height:20px;letter-spacing:0.1000000015px;font-size:14px;font-weight:500;-webkit-box-shadow:var(--elevation-1);box-shadow:var(--elevation-1);-webkit-transition:-webkit-box-shadow 0.2s ease-in-out 0s;transition:-webkit-box-shadow 0.2s ease-in-out 0s;transition:box-shadow 0.2s ease-in-out 0s;transition:box-shadow 0.2s ease-in-out 0s, -webkit-box-shadow 0.2s ease-in-out 0s}.handle-search-filters-container .handle-filters-button span{font-size:18px}.header-detail{height:64px}.large-view-header-container .handle-search-filters-container{-ms-flex-pack:start;justify-content:flex-start}.init-loader-container,.loader-container,.large-view-loader-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:100%;background-color:var(--color-background)}.init-loader-container .loader,.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-container);border-bottom-color:var(--color-on-primary-container);border-radius:50%;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:rotation 1s linear infinite;animation:rotation 1s linear infinite}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.content-container{position:relative;display:-ms-flexbox;display:flex;height:calc(100% - var(--header-height));background-color:var(--color-background)}.content-treks{height:calc(100% - var(--header-height))}.content-trek{height:100%}.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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;position:absolute;bottom:24px;z-index:4}.map-visibility-button-container .map-visibility-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;text-decoration:none;padding:16px;background-color:var(--color-primary-container);color:var(--color-on-primary-container);-webkit-box-shadow:var(--elevation-1);box-shadow:var(--elevation-1);border-radius:12px;height:56px;font-size:16px;width:unset}.map-visibility-button-container .map-visibility-button:hover{-webkit-box-shadow:var(--elevation-4);box-shadow:var(--elevation-4)}.map-visibility-button-container .map-visibility-button span{font-size:24px;margin-right:8px;color:var(--color-on-primary-container)}.init-loader-container,.loader-container{width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}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 - var(--header-height) - 48px)}.app-map-container{width:100%;position:absolute}.large-view-loader-container{width:50%}.large-view-app-treks-list-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:-ms-flexbox;display:flex;-ms-flex-pack:center;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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)}";
 
 const GrwApp = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.resetFilter = createEvent(this, "resetFilter", 7);
     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.selectedSegment = 'selectedActivitiesFilters';
     this.currentTrekId = undefined;
+    this.currentTouristicContentId = undefined;
+    this.currentTouristicEventId = undefined;
     this.appWidth = '100%';
     this.appHeight = '100vh';
     this.api = undefined;
@@ -55,8 +59,17 @@ const GrwApp = class {
     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;
@@ -65,7 +78,7 @@ const GrwApp = class {
     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);
   }
@@ -76,7 +89,31 @@ const GrwApp = class {
     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() {
@@ -91,14 +128,32 @@ const GrwApp = class {
     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() {
@@ -106,34 +161,45 @@ const GrwApp = class {
       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 {
@@ -143,45 +209,92 @@ const GrwApp = class {
   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;
     }
   }
-  handleEraseFilters() {
-    filters.forEach(filter => {
-      state[filter.property].forEach(currentFilter => (currentFilter.selected = false));
-    });
-    state.selectedActivitiesFilters = 0;
-    state.selectedThemesFilters = 0;
-    state.selectedLocationFilters = 0;
-    state.currentTreks = handleFiltersAndSearch();
-    this.resetFilter.emit();
+  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;
   }
-  handleOkFilters() {
-    this.handleFilters();
+  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);
   }
-  handleSelectedSegment(selectedSegment) {
-    this.selectedSegment = selectedSegment;
-  }
-  handleSegment(segment) {
-    return filters.filter(filter => filter.segment === segment).some(filter => state[filter.property] && state[filter.property].length > 0);
+  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: {
@@ -202,19 +315,31 @@ const GrwApp = class {
         '--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", { 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", { 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", { 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("div", { class: "options-container" }, h("div", { class: "filters-container" }, h("div", { class: "filters-options-container" }, state.treksWithinBounds && (h("div", { class: "current-treks-within-bounds-length" }, `${state.treksWithinBounds.length} ${state.treksWithinBounds.length > 1 ? translate[state.language].treks : translate[state.language].trek}`)), h("div", { class: "filters-options-buttons-container" }, h("button", { class: "filter-option-button", onClick: () => this.handleEraseFilters() }, translate[state.language].erase), h("button", { class: "filter-option-button", onClick: () => this.handleOkFilters() }, translate[state.language].ok))), h("div", { class: "segmented-buttons-container" }, this.handleSegment('selectedActivitiesFilters') && (h("label", { class: `segment${this.selectedSegment === 'selectedActivitiesFilters' ? ' selected-segment' : ''}`, onClick: () => this.handleSelectedSegment('selectedActivitiesFilters') }, translate[state.language].activities, " ", state.selectedActivitiesFilters !== 0 && `(${state.selectedActivitiesFilters})`)), this.handleSegment('selectedThemesFilters') && (h("label", { class: `segment${this.selectedSegment === 'selectedThemesFilters' ? ' selected-segment' : ''}`, onClick: () => this.handleSelectedSegment('selectedThemesFilters') }, translate[state.language].themes, " ", state.selectedThemesFilters !== 0 && `(${state.selectedThemesFilters})`)), this.handleSegment('selectedLocationFilters') && (h("label", { class: `segment${this.selectedSegment === 'selectedLocationFilters' ? ' selected-segment' : ''}`, onClick: () => this.handleSelectedSegment('selectedLocationFilters') }, translate[state.language].location, " ", state.selectedLocationFilters !== 0 && `(${state.selectedLocationFilters})`))), h("div", { class: "filters-segment-container" }, this.selectedSegment === 'selectedActivitiesFilters' && (h("div", { class: "segment-container" }, state['practices'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].practice, filterType: "practices", filterNameProperty: "name", segment: "selectedActivitiesFilters" }))), state['difficulties'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].difficulty, filterType: "difficulties", filterNameProperty: "label", segment: "selectedActivitiesFilters" }))), state['durations'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].duration, filterType: "durations", filterNameProperty: "name", segment: "selectedActivitiesFilters" }))), state['lengths'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].length, filterType: "lengths", filterNameProperty: "name", segment: "selectedActivitiesFilters" }))), state['elevations'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].elevation, filterType: "elevations", filterNameProperty: "name", segment: "selectedActivitiesFilters" }))), state['routes'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].routes, filterType: "routes", filterNameProperty: "route", segment: "selectedActivitiesFilters" }))), state['accessibilities'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].accessibility, filterType: "accessibilities", filterNameProperty: "name", segment: "selectedActivitiesFilters" }))), state['labels'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].activities, filterType: "labels", filterNameProperty: "name", segment: "selectedActivitiesFilters" }))))), this.selectedSegment === 'selectedThemesFilters' && (h("div", { class: "segment-container" }, state['themes'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].themes, filterType: "themes", filterNameProperty: "label", segment: "selectedThemesFilters" }))))), this.selectedSegment === 'selectedLocationFilters' && (h("div", { class: "segment-container" }, state['districts'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].districts, filterType: "districts", filterNameProperty: "name", segment: "selectedLocationFilters" }))), state['cities'].length > 0 && (h("div", { class: "filter-container" }, h("grw-filter", { filterName: translate[state.language].cities, filterType: "cities", filterNameProperty: "name", segment: "selectedLocationFilters" }))))))), h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" })))));
+      }, "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() })));
   }
   get appElement() { return getElement(this); }
   static get watchers() { return {