@geotrekce/geotrek-rando-widget 0.18.0 → 0.18.2

package/dist/cjs/grw-common-button_27.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2febcb90.js');
-const i18n = require('./i18n-2df02bcf.js');
+const i18n = require('./i18n-736691e8.js');
 const utils = require('./utils-5eb791dc.js');
 const grwDb_service = require('./grw-db.service-8542603e.js');
 const treks_service = require('./treks.service-1e1a663e.js');
@@ -16,7 +16,7 @@ const RefreshIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox
 
 const FilterListIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="currentColor" d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z"/></svg>`;
 
-const grwCommonButtonCss = ".common-button{-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;color:var(--color-on-primary-container);background-color:var(--color-primary-container);padding:12px 24px;border-radius:var(--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.1px;font-family:var(--font-family);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}.common-button .common-button-icon{font-size:18px}";
+const grwCommonButtonCss = ".common-button{-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;color:var(--color-on-primary-container);background-color:var(--color-primary-container);padding:12px 24px;border-radius:var(--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.1px;font-family:var(--font-family);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;height:44px}.common-button .common-button-icon{font-size:18px}";
 const GrwCommonButtonStyle0 = grwCommonButtonCss;
 
 const GrwCommonButton = class {
@@ -5531,97 +5531,116 @@ const GrwOutdoorCourseDetail = class {
         this.currentOutdoorCourse = undefined;
         this.offline = false;
     }
-    componentDidLoad() {
-        this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
-            modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
-            navigation: {
-                prevEl: this.prevElImagesRef,
-                nextEl: this.nextElImagesRef,
-            },
-            pagination: { el: this.paginationElImagesRef },
-            allowTouchMove: false,
-            keyboard: false,
-            loop: true,
-        });
-        this.swiperImagesRef.onfullscreenchange = () => {
-            this.displayFullscreen = !this.displayFullscreen;
-            this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
-        };
-        this.swiperTouristicContents = new pagination.Swiper(this.swiperTouristicContentsRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.touristicContentsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
+    handleSwipers() {
+        if (this.swiperImagesRef && !this.swiperImages) {
+            this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
+                modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
+                navigation: {
+                    prevEl: this.prevElImagesRef,
+                    nextEl: this.nextElImagesRef,
                 },
-            },
-            loop: false,
-        });
-        this.swiperTouristicEvents = new pagination.Swiper(this.swiperTouristicEventsRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.touristicEventsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
+                pagination: { el: this.paginationElImagesRef },
+                allowTouchMove: false,
+                keyboard: false,
+                loop: true,
+            });
+            this.swiperImagesRef.onfullscreenchange = () => {
+                this.displayFullscreen = !this.displayFullscreen;
+                this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
+            };
+        }
+        if (this.swiperTouristicContentsRef && !this.swiperTouristicContents) {
+            this.swiperTouristicContents = new pagination.Swiper(this.swiperTouristicContentsRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.touristicContentsSwiperScrollbar,
                 },
-            },
-            loop: false,
-        });
-        this.swiperPois = new pagination.Swiper(this.swiperPoisRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.poisSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
                 },
-            },
-            loop: false,
-        });
-        if (this.poiRef) {
+                loop: false,
+            });
+        }
+        if (this.swiperTouristicEventsRef && !this.swiperTouristicEvents) {
+            this.swiperTouristicEvents = new pagination.Swiper(this.swiperTouristicEventsRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.touristicEventsSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperPoisRef && !this.swiperPois) {
+            this.swiperPois = new pagination.Swiper(this.swiperPoisRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.poisSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+    }
+    handleObservers() {
+        if (this.poiRef && !this.poiObserver) {
             this.poiObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.poiIsInViewport.emit(isIntersecting);
             }, { threshold: threshold$2 });
             this.poiObserver.observe(this.poiRef);
         }
-        if (this.touristicContentsRef) {
+        if (this.touristicContentsRef && !this.touristicContentObserver) {
             this.touristicContentObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.touristicContentsIsInViewport.emit(isIntersecting);
             }, { threshold: threshold$2 });
             this.touristicContentObserver.observe(this.touristicContentsRef);
         }
-        if (this.touristicEventsRef) {
+        if (this.touristicEventsRef && !this.touristicEventObserver) {
             this.touristicEventObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.touristicEventsIsInViewport.emit(isIntersecting);
@@ -5629,6 +5648,14 @@ const GrwOutdoorCourseDetail = class {
             this.touristicEventObserver.observe(this.touristicEventsRef);
         }
     }
+    componentDidUpdate() {
+        this.handleObservers();
+        this.handleSwipers();
+    }
+    componentDidLoad() {
+        this.handleObservers();
+        this.handleSwipers();
+    }
     async connectedCallback() {
         if (utils.state.currentOutdoorCourse) {
             this.currentOutdoorCourse = utils.state.currentOutdoorCourse;
@@ -5658,7 +5685,7 @@ const GrwOutdoorCourseDetail = class {
         const outdoorRatings = utils.state.outdoorRatings && this.currentOutdoorCourse && utils.state.outdoorRatings.filter(outdoorRating => this.currentOutdoorCourse.ratings.includes(outdoorRating.id));
         const currentOutdoorCoursesRatingsScales = outdoorRatings && [...new Set(outdoorRatings.map(outdoorRating => outdoorRating.scale))];
         const outdoorRatingsScales = currentOutdoorCoursesRatingsScales && utils.state.outdoorRatingsScale.filter(outdoorRatingsScale => currentOutdoorCoursesRatingsScales.includes(outdoorRatingsScale.id));
-        return (index.h(index.Host, { key: '0c53ba770f1205fa1cdfd6857985876e25c3af8b', style: {
+        return (index.h(index.Host, { key: '16232f04af82f7e5899dfacc097434c45732690e', style: {
                 '--font-family': this.fontFamily,
                 '--color-primary-app': this.colorPrimaryApp,
                 '--color-on-surface': this.colorOnSurface,
@@ -5922,178 +5949,43 @@ const GrwOutdoorSiteDetail = class {
     onDeletePress() {
         this.deleteOutdoorSite();
     }
-    componentDidLoad() {
-        this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
-            modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
-            navigation: {
-                prevEl: this.prevElImagesRef,
-                nextEl: this.nextElImagesRef,
-            },
-            pagination: { el: this.paginationElImagesRef },
-            allowTouchMove: false,
-            keyboard: false,
-            loop: true,
-        });
-        this.swiperImagesRef.onfullscreenchange = () => {
-            this.displayFullscreen = !this.displayFullscreen;
-            this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
-        };
-        this.swiperRelatedOutdoorSites = new pagination.Swiper(this.swiperRelatedOutdoorSitesRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.relatedOutdoorSitesSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperInformationDesks = new pagination.Swiper(this.swiperInformationDesksRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.informationDesksContentsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperRelatedOutdoorCourses = new pagination.Swiper(this.swiperRelatedOutdoorCoursesRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.relatedOutdoorCoursesSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperTouristicContents = new pagination.Swiper(this.swiperTouristicContentsRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.touristicContentsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperTouristicEvents = new pagination.Swiper(this.swiperTouristicEventsRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.touristicEventsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperPois = new pagination.Swiper(this.swiperPoisRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.poisSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        if (this.informationPlacesRef) {
+    handleObservers() {
+        if (this.informationPlacesRef && !this.informationPlacesObserver) {
             this.informationPlacesObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.informationPlacesIsInViewport.emit(isIntersecting);
             }, { threshold: threshold$1 });
             this.informationPlacesObserver.observe(this.informationPlacesRef);
         }
-        if (this.poiRef) {
+        if (this.poiRef && !this.poiObserver) {
             this.poiObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.poiIsInViewport.emit(isIntersecting);
             }, { threshold: threshold$1 });
             this.poiObserver.observe(this.poiRef);
         }
-        if (this.touristicContentsRef) {
+        if (this.touristicContentsRef && !this.touristicContentObserver) {
             this.touristicContentObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.touristicContentsIsInViewport.emit(isIntersecting);
             }, { threshold: threshold$1 });
             this.touristicContentObserver.observe(this.touristicContentsRef);
         }
-        if (this.touristicEventsRef) {
+        if (this.touristicEventsRef && !this.touristicEventObserver) {
             this.touristicEventObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.touristicEventsIsInViewport.emit(isIntersecting);
             }, { threshold: threshold$1 });
             this.touristicEventObserver.observe(this.touristicEventsRef);
         }
-        if (this.sitesRef) {
+        if (this.sitesRef && !this.siteObserver) {
             this.siteObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.sitesIsInViewport.emit(isIntersecting);
             }, { threshold: threshold$1 });
             this.siteObserver.observe(this.sitesRef);
         }
-        if (this.coursesRef) {
+        if (this.coursesRef && !this.courseObserver) {
             this.courseObserver = new IntersectionObserver(entries => {
                 const isIntersecting = entries[0].isIntersecting;
                 this.coursesIsInViewport.emit(isIntersecting);
@@ -6101,6 +5993,183 @@ const GrwOutdoorSiteDetail = class {
             this.courseObserver.observe(this.coursesRef);
         }
     }
+    handleSwipers() {
+        if (this.swiperImagesRef && !this.swiperImages) {
+            this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
+                modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
+                navigation: {
+                    prevEl: this.prevElImagesRef,
+                    nextEl: this.nextElImagesRef,
+                },
+                pagination: { el: this.paginationElImagesRef },
+                allowTouchMove: false,
+                keyboard: false,
+                loop: true,
+            });
+            this.swiperImagesRef.onfullscreenchange = () => {
+                this.displayFullscreen = !this.displayFullscreen;
+                this.displayFullscreen ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
+            };
+        }
+        if (this.swiperRelatedOutdoorSitesRef && !this.swiperRelatedOutdoorSites) {
+            this.swiperRelatedOutdoorSites = new pagination.Swiper(this.swiperRelatedOutdoorSitesRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.relatedOutdoorSitesSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperInformationDesksRef && !this.swiperInformationDesks) {
+            this.swiperInformationDesks = new pagination.Swiper(this.swiperInformationDesksRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.informationDesksContentsSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperRelatedOutdoorCoursesRef && !this.swiperRelatedOutdoorCourses) {
+            this.swiperRelatedOutdoorCourses = new pagination.Swiper(this.swiperRelatedOutdoorCoursesRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.relatedOutdoorCoursesSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperTouristicContentsRef && !this.swiperTouristicContents) {
+            this.swiperTouristicContents = new pagination.Swiper(this.swiperTouristicContentsRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.touristicContentsSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperTouristicEventsRef && !this.swiperTouristicEvents) {
+            this.swiperTouristicEvents = new pagination.Swiper(this.swiperTouristicEventsRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.touristicEventsSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperPoisRef && !this.swiperPois) {
+            this.swiperPois = new pagination.Swiper(this.swiperPoisRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.poisSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+    }
+    componentDidUpdate() {
+        this.handleObservers();
+        this.handleSwipers();
+    }
+    componentDidLoad() {
+        this.handleObservers();
+        this.handleSwipers();
+    }
     async connectedCallback() {
         if (utils.state.currentOutdoorSite) {
             this.sources = utils.state.sources.filter(source => utils.state.currentOutdoorSite.source.includes(source.id));
@@ -6313,7 +6382,7 @@ const GrwOutdoorSiteDetail = class {
         const outdoorRatings = utils.state.outdoorRatings && this.currentOutdoorSite && utils.state.outdoorRatings.filter(outdoorRating => this.currentOutdoorSite.ratings.includes(outdoorRating.id));
         const currentOutdoorSitesRatingsScales = outdoorRatings && [...new Set(outdoorRatings.map(outdoorRating => outdoorRating.scale))];
         const outdoorRatingsScales = currentOutdoorSitesRatingsScales && utils.state.outdoorRatingsScale.filter(outdoorRatingsScale => currentOutdoorSitesRatingsScales.includes(outdoorRatingsScale.id));
-        return (index.h(index.Host, { key: '7b8c60c1799700365a05f092953660c653320f94', style: {
+        return (index.h(index.Host, { key: '315c1169d344c5c412149dedc3347fb7c5656534', style: {
                 '--font-family': this.fontFamily,
                 '--color-primary-app': this.colorPrimaryApp,
                 '--color-on-surface': this.colorOnSurface,
@@ -6857,23 +6926,31 @@ const GrwTouristicContentDetail = class {
         this.colorBackground = '#fef7ff';
         this.isLargeView = false;
     }
+    handleSwipers() {
+        if (this.swiperImagesRef && !this.swiperImages) {
+            this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
+                modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
+                navigation: {
+                    prevEl: this.prevElImagesRef,
+                    nextEl: this.nextElImagesRef,
+                },
+                pagination: { el: this.paginationElImagesRef },
+                allowTouchMove: false,
+                keyboard: false,
+                loop: true,
+            });
+            this.swiperImagesRef.onfullscreenchange = () => {
+                this.displayFullscreen = !this.displayFullscreen;
+                this.displayFullscreen && !this.offline ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
+            };
+        }
+    }
+    componentDidUpdate() {
+        this.handleSwipers();
+    }
     componentDidLoad() {
-        this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
-            modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
-            navigation: {
-                prevEl: this.prevElImagesRef,
-                nextEl: this.nextElImagesRef,
-            },
-            pagination: { el: this.paginationElImagesRef },
-            allowTouchMove: false,
-            keyboard: false,
-            loop: true,
-        });
-        this.swiperImagesRef.onfullscreenchange = () => {
-            this.displayFullscreen = !this.displayFullscreen;
-            this.displayFullscreen && !this.offline ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
-        };
         this.offline = utils.state.currentTouristicContent.offline;
+        this.handleSwipers();
     }
     handleFullscreen(close = false) {
         if (!close) {
@@ -6891,7 +6968,7 @@ const GrwTouristicContentDetail = class {
             utils.state.currentTouristicContent &&
             utils.state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === utils.state.currentTouristicContent.category);
         const cities = utils.state.currentTouristicContent && utils.state.currentTouristicContent.cities.map(currentCity => { var _a; return (_a = utils.state.cities.find(city => city.id === currentCity)) === null || _a === void 0 ? void 0 : _a.name; });
-        return (index.h(index.Host, { key: '7750c701df76bba15232f1f4b0315d1f8ebb9055', style: {
+        return (index.h(index.Host, { key: '341d76d558e5ea5d22099e949d79dd2d2c4b2471', style: {
                 '--font-family': this.fontFamily,
                 '--color-primary-app': this.colorPrimaryApp,
                 '--color-on-surface': this.colorOnSurface,
@@ -7153,23 +7230,31 @@ const GrwTouristicEventDetail = class {
         this.colorBackground = '#fef7ff';
         this.isLargeView = false;
     }
+    handleSwipers() {
+        if (this.swiperImagesRef && !this.swiperImages) {
+            this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
+                modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
+                navigation: {
+                    prevEl: this.prevElImagesRef,
+                    nextEl: this.nextElImagesRef,
+                },
+                pagination: { el: this.paginationElImagesRef },
+                allowTouchMove: false,
+                keyboard: false,
+                loop: true,
+            });
+            this.swiperImagesRef.onfullscreenchange = () => {
+                this.displayFullscreen = !this.displayFullscreen;
+                this.displayFullscreen && !this.offline ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
+            };
+        }
+    }
+    componentDidUpdate() {
+        this.handleSwipers();
+    }
     componentDidLoad() {
-        this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
-            modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
-            navigation: {
-                prevEl: this.prevElImagesRef,
-                nextEl: this.nextElImagesRef,
-            },
-            pagination: { el: this.paginationElImagesRef },
-            allowTouchMove: false,
-            keyboard: false,
-            loop: true,
-        });
-        this.swiperImagesRef.onfullscreenchange = () => {
-            this.displayFullscreen = !this.displayFullscreen;
-            this.displayFullscreen && !this.offline ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
-        };
         this.offline = utils.state.currentTouristicEvent.offline;
+        this.handleSwipers();
     }
     handleFullscreen(close = false) {
         if (!close) {
@@ -7187,7 +7272,7 @@ const GrwTouristicEventDetail = class {
             utils.state.currentTouristicEvent &&
             utils.state.touristicEventTypes.find(touristicEventCategory => touristicEventCategory.id === utils.state.currentTouristicEvent.type);
         const cities = utils.state.currentTouristicEvent && utils.state.currentTouristicEvent.cities.map(currentCity => { var _a; return (_a = utils.state.cities.find(city => city.id === currentCity)) === null || _a === void 0 ? void 0 : _a.name; });
-        return (index.h(index.Host, { key: '3cf070c005eee9c2eda49378c33ef0fe6b00fe85', style: {
+        return (index.h(index.Host, { key: '483376c95e9f180e35b0daf3545f5b106f384657', style: {
                 '--font-family': this.fontFamily,
                 '--color-primary-app': this.colorPrimaryApp,
                 '--color-on-surface': this.colorOnSurface,
@@ -7551,6 +7636,154 @@ const GrwTrekDetail = class {
     }
     componentDidUpdate() {
         this.handleObservers();
+        this.handleSwipers();
+    }
+    handleSwipers() {
+        if (this.swiperImagesRef && !this.swiperImages) {
+            this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
+                modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
+                navigation: {
+                    prevEl: this.prevElImagesRef,
+                    nextEl: this.nextElImagesRef,
+                },
+                pagination: { el: this.paginationElImagesRef },
+                allowTouchMove: false,
+                keyboard: false,
+                loop: true,
+            });
+            if (this.swiperImagesRef) {
+                this.swiperImagesRef.onfullscreenchange = () => {
+                    this.displayFullscreen = !this.displayFullscreen;
+                    this.displayFullscreen && !this.offline ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
+                };
+            }
+        }
+        if (this.swiperStepRef && !this.swiperStep) {
+            this.swiperStep = new pagination.Swiper(this.swiperStepRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                initialSlide: this.getCurrentStepIndex(),
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.stepSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperPoisRef && !this.swiperPois) {
+            this.swiperPois = new pagination.Swiper(this.swiperPoisRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.poisSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperInformationDesksRef && !this.swiperInformationDesks) {
+            this.swiperInformationDesks = new pagination.Swiper(this.swiperInformationDesksRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.informationDesksContentsSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperTouristicContentsRef && !this.swiperTouristicContents) {
+            this.swiperTouristicContents = new pagination.Swiper(this.swiperTouristicContentsRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.touristicContentsSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
+        if (this.swiperTouristicEventsRef && !this.swiperTouristicEvents) {
+            this.swiperTouristicEvents = new pagination.Swiper(this.swiperTouristicEventsRef, {
+                modules: [freeMode, Mousewheel, Scrollbar],
+                slidesPerView: 1.5,
+                spaceBetween: 20,
+                grabCursor: true,
+                freeMode: true,
+                mousewheel: { forceToAxis: true },
+                scrollbar: {
+                    draggable: true,
+                    hide: false,
+                    el: this.touristicEventsSwiperScrollbar,
+                },
+                breakpointsBase: 'container',
+                breakpoints: {
+                    '540': {
+                        slidesPerView: 2.5,
+                    },
+                    '1024': {
+                        slidesPerView: 4,
+                    },
+                },
+                loop: false,
+            });
+        }
     }
     handleObservers() {
         if (this.presentationRef && !this.presentationObserver) {
@@ -7649,125 +7882,8 @@ const GrwTrekDetail = class {
         }
     }
     componentDidLoad() {
-        this.swiperImages = new pagination.Swiper(this.swiperImagesRef, {
-            modules: [pagination.Navigation, pagination.Pagination, pagination.Keyboard, freeMode, Mousewheel],
-            navigation: {
-                prevEl: this.prevElImagesRef,
-                nextEl: this.nextElImagesRef,
-            },
-            pagination: { el: this.paginationElImagesRef },
-            allowTouchMove: false,
-            keyboard: false,
-            loop: true,
-        });
-        if (this.swiperImagesRef) {
-            this.swiperImagesRef.onfullscreenchange = () => {
-                this.displayFullscreen = !this.displayFullscreen;
-                this.displayFullscreen && !this.offline ? this.swiperImages.keyboard.enable() : this.swiperImages.keyboard.disable();
-            };
-        }
-        this.swiperStep = new pagination.Swiper(this.swiperStepRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            initialSlide: this.getCurrentStepIndex(),
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.stepSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperPois = new pagination.Swiper(this.swiperPoisRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.poisSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperInformationDesks = new pagination.Swiper(this.swiperInformationDesksRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.informationDesksContentsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperTouristicContents = new pagination.Swiper(this.swiperTouristicContentsRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.touristicContentsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
-        this.swiperTouristicEvents = new pagination.Swiper(this.swiperTouristicEventsRef, {
-            modules: [freeMode, Mousewheel, Scrollbar],
-            slidesPerView: 1.5,
-            spaceBetween: 20,
-            grabCursor: true,
-            freeMode: true,
-            mousewheel: { forceToAxis: true },
-            scrollbar: {
-                draggable: true,
-                hide: false,
-                el: this.touristicEventsSwiperScrollbar,
-            },
-            breakpointsBase: 'container',
-            breakpoints: {
-                '540': {
-                    slidesPerView: 2.5,
-                },
-            },
-            loop: false,
-        });
         this.handleObservers();
+        this.handleSwipers();
     }
     async connectedCallback() {
         if (utils.state.currentTrek) {
@@ -7876,7 +7992,13 @@ const GrwTrekDetail = class {
         }
     }
     handleScrollTo(element) {
-        this.trekDetailContainerRef.scrollTo({ top: element.offsetTop - 64 });
+        const scrollbarFromElement = this.trekDetailContainerRef.scrollHeight > this.trekDetailContainerRef.clientHeight;
+        if (scrollbarFromElement) {
+            this.trekDetailContainerRef.scrollTo({ top: element.offsetTop - 64 });
+        }
+        else {
+            window.scrollTo({ top: element.offsetTop - 64 });
+        }
     }
     getCurrentStepIndex() {
         return utils.state.currentTrekSteps ? utils.state.currentTrekSteps.findIndex(step => step.id === this.currentTrek.id) : 0;
@@ -8097,7 +8219,7 @@ const GrwTrekDetail = class {
     render() {
         var _a, _b, _c, _d, _e;
         const defaultImageSrc = index.getAssetPath(`${''}assets/default-image.svg`);
-        return (index.h(index.Host, { key: 'd697ece2420dfd2317a8b56f97918475cced290d', style: {
+        return (index.h(index.Host, { key: '829dcf5bde01fa8abaacbe3677da486a5f6cb7ee', style: {
                 '--font-family': this.fontFamily,
                 '--color-primary-app': this.colorPrimaryApp,
                 '--color-on-surface': this.colorOnSurface,