hr-design-system-handlebars 1.41.0 → 1.42.0

package/.storybook/preview-head.html

@@ -1,9 +1,4 @@
-<script defer src="https://unpkg.com/async-alpine@1.0.0/dist/async-alpine.script.js"></script>
-<script defer src="https://unpkg.com/@alpinejs/collapse@3.8.1/dist/cdn.min.js"></script>
-<script defer src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js"></script>
-<script defer src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>
 <script src="vendor/modernizr/modernizr.cust.js"></script>
-<script src="vendor/js/header.alpine.js"></script>
 <!--to be sure hyphems work correctly lang Attribute needs to be "de"
 see: https://github.com/storybookjs/storybook/issues/11706 -->
 <script>

package/.storybook/preview.js

@@ -8,7 +8,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 import Initializer from '../build/webpack/feature-loader/initializer/initializer'
 import loadFeature from '../build/webpack/feature-loader/initializer/loader'
-import '../src/assets/vendor/js/header.alpine'
+import '../src/assets/js/alpine.js'
 import '../src/assets/tailwind.css'
 
 function loadDelayedImages() {

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.42.0 (Thu Oct 12 2023)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 2416 [#731](https://github.com/mumprod/hr-design-system-handlebars/pull/731) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.41.0 (Fri Oct 06 2023)
 
 #### 🚀 Enhancement

package/build/scripts/build.js

@@ -8,7 +8,10 @@ const run = (cmd) => execSync(cmd, { stdio: 'inherit', cwd: root })
 run(`npx copyfiles \"./src/index.js\" dist --up=1`)
 //run(`npx copyfiles \"./src/stories/views/**/*.hbs\" dist --up=2`)
 run(`npx copyfiles \"./src/assets/vendor/**/*.{css,js}\" dist  --up=1`)
-run(`npx copyfiles \"./src/stories/views/**/*.{feature,subfeature}.js\" dist/assets/js  --up=3`)
+run(`npx copyfiles \"./src/assets/js/**/*.js\" dist  --up=1`)
+run(
+    `npx copyfiles \"./src/stories/views/**/*.{feature,subfeature,alpine}.js\" dist/assets/js  --up=3`
+)
 run(`npx copyfiles \"./src/assets/brand/*/icons/logo/*.svg\" dist --up=1`)
 run(`npx copyfiles \"./src/assets/**/*.{woff,svg}\" dist --up=1`)
 run(`npx copyfiles \"./src/assets/brand/*/conf/locatags.json\" dist --up=1`)

package/dist/assets/index.css

@@ -3035,7 +3035,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1696588796618;
+  counter-reset: cnt1697119994052;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3270,7 +3270,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1696588796618 1;
+  counter-increment: cnt1697119994052 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3286,7 +3286,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1696588796618);
+  content: counter(cnt1697119994052);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -0,0 +1,47 @@
+import AsyncAlpine from 'async-alpine'
+import collapse from '@alpinejs/collapse'
+import Toolkit from '@alpine-collective/toolkit'
+import Alpine from 'alpinejs'
+import mainNavigationHandler from 'components/site_header/mainNavigationHandler.alpine'
+import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
+import overlayHandler from 'components/site_header/overlayHandler.alpine'
+import dropdown from 'components/site_header/dropdown.alpine'
+
+AsyncAlpine.init(Alpine)
+    .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
+    .data('slider', () =>
+        import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
+    )
+    .start()
+
+window.Alpine = Alpine
+
+// Initialization of plugins, stores and data needs to be done before the call the Alpine.start()
+
+// Initialization of stores
+Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
+Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
+Alpine.store('burgeropen', false)
+Alpine.store('searchFieldOpen', false)
+Alpine.store('serviceNavIsOpen', false)
+Alpine.store('searchID', {
+    current: '{{nextRandom}}',
+})
+Alpine.store('serviceID', {
+    open: false,
+    current: '0',
+})
+Alpine.store('navIsVisible', true)
+Alpine.store('subNavIsVisible', false)
+
+// Initialization of data handlers
+Alpine.data('mainNavigationHandler', mainNavigationHandler)
+Alpine.data('overlayHandler', overlayHandler)
+Alpine.data('flyoutHandler', flyoutHandler)
+Alpine.data('dropdown', dropdown)
+
+// Initialization of plugins
+Alpine.plugin(Toolkit)
+Alpine.plugin(collapse)
+
+Alpine.start()

package/{src/assets/vendor/js → dist/assets/js/components/podcast}/podcast_player.alpine.js

@@ -56,103 +56,11 @@ export default function playaudio() {
             _player.init = false
             _player.firstPlay = true
 
-            _player.audioElement.addEventListener('play', handlePlay.bind(this))
-            _player.audioElement.addEventListener('playing', handlePlaying.bind(this))
-            _player.audioElement.addEventListener('pause', handlePause.bind(this))
-            _player.audioElement.addEventListener('waiting', handleWaiting.bind(this))
-            _player.audioElement.addEventListener('ended', handleStopped.bind(this))
-
             // this.playerCount == 0 ? _player.range.parentNode.classList.remove('hidden') : _player.range.parentNode.classList.add('hidden')
             this.playerCount++
 
             this.playlist[id] = _player
-
-            const settings = JSON.parse(this.playlist[id].audioElement.dataset.propMediaMetadata)
-            const avContent = {
-                av_content_id: settings.piano.av_content_id,
-                av_content: settings.piano.av_content,
-                av_content_type: settings.piano.av_content_type,
-                av_content_duration: settings.piano.av_content_duration,
-                av_broadcasting_type: settings.piano.av_broadcasting_type,
-                av_content_theme1: settings.piano.av_content_theme1,
-                hr_document_type: settings.piano.hr_document_type,
-                site_level2_id: settings.piano.site_level2_id,
-            }
-
-            if (settings.piano.av_content_theme2) {
-                avContent.av_content_theme2 = settings.piano.av_content_theme2
-            }
-            if (settings.piano.av_content_theme3) {
-                avContent.av_content_theme3 = settings.piano.av_content_theme3
-            }
-
-            function handlePlay(event) {
-                this.dispatchCustomEvent('hr-avInsights:play', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handlePlaying(event) {
-                if (_player.firstPlay) {
-                    this.dispatchCustomEvent('hr-avInsights:playback-start', {
-                        data: {
-                            playerId: getPlayerIdForAvInsights(),
-                            cursorPosition: _player.audioElement.currentTime * 1000,
-                            avContent: avContent,
-                        },
-                    })
-                    _player.firstPlay = false
-                } else {
-                    this.dispatchCustomEvent('hr-avInsights:playback-resumed', {
-                        data: {
-                            playerId: getPlayerIdForAvInsights(),
-                            cursorPosition: _player.audioElement.currentTime * 1000,
-                            avContent: avContent,
-                        },
-                    })
-                }
-            }
-
-            function handleWaiting(event) {
-                this.dispatchCustomEvent('hr-avInsights:buffer-start', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handlePause(event) {
-                this.dispatchCustomEvent('hr-avInsights:playback-paused', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-            }
-
-            function handleStopped(event) {
-                this.dispatchCustomEvent('hr-avInsights:playback-stopped', {
-                    data: {
-                        playerId: getPlayerIdForAvInsights(),
-                        cursorPosition: _player.audioElement.currentTime * 1000,
-                        avContent: avContent,
-                    },
-                })
-                _player.firstPlay = true
-            }
-
-            function getPlayerIdForAvInsights() {
-                return _player.id + '-' + avContent.av_content_id
-            }
         },
-
         listenToGlobalStop() {
             console.log('global listener init')
             document.addEventListener(

package/dist/assets/js/components/site_header/dropdown.alpine.js

@@ -0,0 +1,77 @@
+export default () => ({
+    // state of the dropdown
+    dropped: false,
+    preventDefault(prevDefault, e) {
+        if (prevDefault) {
+            e.preventDefault()
+        }
+    },
+    isDesktopView() {
+        return this.$screen('lg')
+    },
+    // toggle() interpolates state
+    toggle() {
+        this.dropped = !this.dropped
+    },
+    correctFlyoutPos() {
+        if (this.$screen('lg')) {
+            let elementBoundingClientRec = this.$el.getBoundingClientRect()
+            let parentElementBoundingClientRec = this.$el
+                .closest('.relative')
+                .getBoundingClientRect()
+            this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left =
+                elementBoundingClientRec.left - Math.abs(parentElementBoundingClientRec.left) + 'px'
+        } else {
+            this.$el.parentNode.querySelector('.sb-navigation-flyout').style.left = '0px'
+        }
+    },
+    // toggles visibility of service nav and sets global variables in stores
+    toggleServiceNav() {
+        this.dropped = !this.dropped
+
+        // close search if open
+        this.$store.searchFieldOpen = false
+
+        // if clicked element is not the current serviceID, leave the servicenav open, else interpolate servicenav state
+        this.$el.id != this.$store.serviceID.current
+            ? (this.$store.serviceNavIsOpen = true)
+            : this.$el.id == this.$store.serviceID.current
+            ? (this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen)
+            : null
+
+        //if burger is open, dispatch event to close it
+        this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
+
+        console.log('currentID: ' + this.$store.serviceID.current)
+        console.log('target-id: ' + this.$event.target.id)
+        console.log('element-id: ' + this.$el.id)
+        console.log('serviceNav is open:' + this.$store.serviceNavIsOpen)
+
+        //set the serviceID to the current element´s ID.
+        this.$store.serviceID.current = this.$el.id
+
+        //enable/disable scrolling
+        this.toggleScrolling(!this.$store.serviceNavIsOpen)
+
+        //defines behaviour for servicenav on mobile viewports, taking care of viewport sizes
+        let myFlyout = document.querySelector('#flyout-' + this.$el.id)
+        let brandNavHeight = this.percent > 0 ? 40 : 0
+
+        if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
+            window.setTimeout(function () {
+                if (myFlyout.scrollHeight > window.innerHeight - myFlyout.offsetTop) {
+                    myFlyout.style.height = 'auto'
+                    window.innerWidth < 768
+                        ? (myFlyout.style.maxHeight =
+                              window.innerHeight - myFlyout.offsetTop - 80 + brandNavHeight + 'px')
+                        : (myFlyout.style.maxHeight =
+                              window.innerHeight - myFlyout.offsetTop - 40 + brandNavHeight + 'px')
+                    myFlyout.style.overflowY = 'scroll'
+                } else {
+                    myFlyout.style.maxHeight = ''
+                    //myFlyout.style.overflowY = 'hidden'
+                }
+            }, 150)
+        }
+    },
+})

package/dist/assets/js/components/site_header/flyoutHandler.alpine.js

@@ -0,0 +1,54 @@
+export default () => ({
+    init() {
+        //Initial: x-collapse only on mobile/tablet
+        if (window.innerWidth < 1024) {
+            this.$el.setAttribute('x-collapse', '')
+        }
+    },
+
+    //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
+    sectionNavFlyoutWatcher() {
+        this.$watch('dropped', (value) => {
+            let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
+            let brandNavHeight = this.percent > 0 ? 40 : 0
+            if (window.innerWidth < 1024) {
+                if (value == true) {
+                    if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                        this.$refs.sectionnavigation.style.maxHeight = a + 'px'
+                        this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                    } else {
+                        this.$refs.sectionnavigation.style.maxHeight =
+                            window.innerHeight -
+                            this.$refs.sectionnavigation.offsetTop +
+                            brandNavHeight +
+                            'px'
+                        this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                    }
+                } else {
+                    if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
+                        this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                    } else {
+                        this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                    }
+                }
+            }
+        })
+    },
+
+    //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
+    setFlyoutAnimationStyle() {
+        if (window.innerWidth > 1023) {
+            if (this.$el.hasAttribute('x-collapse.duration.500ms')) {
+                this.$el.removeAttribute('x-collapse.duration.500ms')
+                delete this.$el._x_transition
+                this.$el.style.removeProperty('overflow')
+                this.$el.style.removeProperty('height')
+                if (!this.$el._x_isShown) this.$el.style.display = 'none'
+                if (this.$el.hasAttribute('hidden')) this.$el.removeAttribute('hidden')
+            }
+        } else {
+            if (!this.$el.hasAttribute('x-collapse.duration.500ms'))
+                this.$el.setAttribute('x-collapse.duration.500ms', '')
+        }
+    },
+})

package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js

@@ -0,0 +1,219 @@
+export default () => ({
+    debounce(callback, wait) {
+        let timeoutId = null
+        return (...args) => {
+            window.clearTimeout(timeoutId)
+            timeoutId = window.setTimeout(() => {
+                callback.apply(null, args)
+            }, wait)
+        }
+    },
+    start() {
+        let lastScrollTop = 0
+        let height = window.innerHeight
+
+        //Globale Variable, true = user initiated scroll / false = programmatic scroll via JS (e.g. click on Anchor Link)
+        let userScroll = false
+        window.userScroll = userScroll
+
+        // gets fired when user initated scroll happened, global variable is used in Ticker-Topnews and other anchor links to prevent expanding of the navigation if scrollposition gets corrected by JS.
+        const mouseEvent = () => {
+            userScroll = true
+            window.userScroll = true
+        }
+        // detect if the user clicked/dragged the scrollbar manually
+        const clickedOnScrollbar = (mouseX) => {
+            return document.documentElement.offsetWidth <= mouseX ? true : false
+        }
+        // if clicked on scrollbar, fire user initiated mouse event
+        const mouseDownHandler = (e) => {
+            clickedOnScrollbar(e.clientX) ? mouseEvent() : null
+        }
+        // main scroll handler, defines scroll direction, percent of viewport scrolled, visibility of navigation and subnavigation
+        const scrollHandler = () => {
+            let winScroll = document.body.scrollTop || document.documentElement.scrollTop
+            winScroll > lastScrollTop ? (this.scrollingDown = true) : (this.scrollingDown = false)
+            this.percent = Math.round((winScroll / height) * 100)
+            lastScrollTop = winScroll
+            this.$store.navIsVisible = !this.isNavHidden()
+            this.$store.subNavIsVisible = !this.isSubNavHidden()
+            //console.log('winscroll: '+winScroll+' screen height: '+height + '  percent scrolled: '+ this.percent)
+            //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
+        }
+        // Listeners
+        window.addEventListener('mousedown', mouseDownHandler, false)
+        window.addEventListener('wheel', mouseEvent, false)
+        window.addEventListener('touchmove', mouseEvent, false)
+        window.addEventListener('scroll', this.debounce(scrollHandler, 50), { passive: true })
+    },
+    //Holds the percentage of scrolled viewport
+    percent: 0,
+
+    //defines the scroll direction
+    scrollingDown: true,
+
+    //returns true if section navigation is hidden on desktop OR service navigation is hidden on mobile
+    isNavHidden() {
+        if (this.$screen('lg')) {
+            return this.shouldSectionNavBeHidden()
+        } else {
+            return this.shouldServiceNavBeHidden()
+        }
+    },
+
+    //returns false if subnav is visible and true if subnav is hidden
+    isSubNavHidden() {
+        if (this.$screen('lg')) {
+            if (document.querySelector('.isSelectedAndOpen') !== null) {
+                return false
+            } else {
+                return true
+            }
+        } else {
+            return true
+        }
+    },
+
+    // returns true if the user scrolled at least 1px from top
+    shouldBrandNavBeHidden() {
+        return this.percent > 0
+    },
+
+    // returns true if user scrolled >50% and scrolls down, no burger menu is open and the screen size is desktop. If scroll was initiated by script, ignore scroll direction.
+    shouldSectionNavBeHidden() {
+        if (window.userScroll == true) {
+            return (
+                this.percent > 50 &&
+                this.scrollingDown &&
+                this.$store.burgeropen == false &&
+                this.$screen('lg')
+            )
+        } else {
+            return this.percent > 50 && this.$store.burgeropen == false && this.$screen('lg')
+        }
+    },
+
+    // returns true if user scrolled >90% and scrolls further down, no burger menu is open and the screen is NOT desktop. If scroll was initiated by script, ignore scroll direction.
+    shouldServiceNavBeHidden() {
+        if (window.userScroll == true) {
+            return (
+                this.percent > 90 &&
+                !this.$screen('lg') &&
+                this.scrollingDown &&
+                this.$store.burgeropen == false
+            )
+        } else {
+            return this.percent > 90 && !this.$screen('lg') && this.$store.burgeropen == false
+        }
+    },
+
+    //returns true if user scrolled >50% and scrolls further down, no burger menu is open, no serviceNav is open and screen is not larger than mobile. OR: same same, but scrolling up.
+    shouldServiceIconsBeHidden() {
+        return (
+            (this.percent > 50 &&
+                !this.$screen('md') &&
+                this.$store.burgeropen == false &&
+                this.$store.serviceNavIsOpen == false &&
+                this.scrollingDown == true) ||
+            (this.percent > 50 &&
+                !this.$screen('md') &&
+                this.$store.burgeropen == false &&
+                this.$store.serviceNavIsOpen == false &&
+                this.scrollingDown == false)
+        )
+    },
+
+    // returns true if user scrolled >50% and scrolls further down and is a desktop viewport
+    shouldFlyoutBeHidden() {
+        return this.percent > 50 && this.scrollingDown && this.$screen('lg')
+    },
+
+    // resets the navigation back to the initial state. Happens f.ex. on resize of window.
+    resetNav() {
+        if (window.innerWidth > 1023) {
+            this.$refs.sectionnavigation.setAttribute('style', '')
+        } else {
+            // todo vasco: checken ob das wieder rein sollte
+            // hidden needs to be set here to avoid flickering of the sectionNav on viewport change, gets removed in timeout
+            // this.$refs.sectionnavigation.classList.add('hidden')
+            // this.$refs.sectionnavigation.style.maxHeight="0px"
+        }
+
+        let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
+        let nowClientWidth = document.documentElement.clientWidth || document.body.clientWidth
+        let nextNowClientHeight = this.$store.clientHeight
+        if (nextNowClientHeight >= nowClientHeight && this.$store.clientWidth == nowClientWidth) {
+            // Event handling of keyboard pop-up
+            nextNowClientHeight = nowClientHeight
+            this.$store.clientWidth = nowClientWidth
+        } else {
+            // timeout is used to dispatch events after the resize is done
+            let timeout
+            clearTimeout(timeout)
+            timeout = setTimeout(() => {
+                this.$refs.sectionnavigation.classList.remove('hidden')
+                this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
+                this.$store.searchFieldOpen === true
+                    ? this.$dispatch('search-mobile-click-outside')
+                    : null
+                this.$store.searchFieldOpen === true ? this.$dispatch('search-close') : null
+                this.$store.serviceNavIsOpen === true ? this.$dispatch('close-servicemenu') : null
+                this.toggleScrolling(true)
+            }, 250)
+            // Event handling of keyboard pop-up
+            nextNowClientHeight = nowClientHeight
+            this.$store.clientWidth = nowClientWidth
+        }
+    },
+
+    // toggles the maxHeight of the section nav and makes sure there is enough space to display all items.
+    toggleSectionNav() {
+        //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0  ///  desktop? just clear maxHeight attribute )
+        //true = sectionNav öffnet (maxheight = scrollheight)
+        console.log('toggleSectionNav, Event: ' + this.$event.detail)
+        if (this.$event.detail === false) {
+            if (window.innerWidth < 1024) {
+                this.$refs.sectionnavigation.style.maxHeight = '0px'
+            } else {
+                this.$refs.sectionnavigation.style.maxHeight = ''
+            }
+        } else {
+            let winheightcorr =
+                parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
+            let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
+            let brandNavHeight = this.percent > 0 ? 40 : 0
+
+            if (navheight > winheightcorr) {
+                this.$refs.sectionnavigation.style.overflowY = 'scroll'
+                this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight + 'px'
+            } else {
+                this.$refs.sectionnavigation.style.overflowY = 'hidden'
+                this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
+            }
+        }
+    },
+
+    // no scrolling when overlay is visible
+    disableScrolling() {
+        document.body.classList.add('overflow-hidden', 'h-full', 'w-full')
+        this.$refs.myOverlay.ontouchmove = (e) => e.preventDefault()
+        console.log('disableScrolling')
+    },
+
+    //only scroll when no overlay is visible
+    enableScrolling() {
+        document.body.classList.remove('overflow-hidden', 'h-full', 'w-full')
+        this.$refs.myOverlay.ontouchmove = (e) => true
+        console.log('enableScrolling')
+    },
+
+    // toggles scrolling ability
+    toggleScrolling(mode) {
+        if (this.$screen(0) && !this.$screen('lg')) {
+            mode == false ? this.disableScrolling() : this.enableScrolling()
+        }
+        if (this.$screen('lg') && mode == true) {
+            this.enableScrolling()
+        }
+    },
+})

package/dist/assets/js/components/site_header/overlayHandler.alpine.js

@@ -0,0 +1,20 @@
+export default () => ({
+    // show the overlay on mobile and tablet if burger menu is open OR service nav is open OR search field is open
+    shouldOverlayBeShown() {
+        return (
+            !this.$screen('lg') &&
+            (this.$store.burgeropen == true ||
+                this.$store.serviceNavIsOpen == true ||
+                this.$store.searchFieldOpen == true)
+        )
+    },
+
+    // on click on overlay change global var for servicenav, dispatch events to close burger and service menu, re-enable scrolling.
+    overlayWasClicked() {
+        this.$store.serviceNavIsOpen ? (this.$store.serviceNavIsOpen = false) : null
+        this.$dispatch('burger-close')
+        this.$dispatch('close-servicemenu')
+        // this.$dispatch('toggleScrolling', true )
+        this.toggleScrolling(true)
+    },
+})

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs

@@ -4,7 +4,6 @@
     class="relative w-full"
     ax-load 
     x-ignore
-    ax-load-src={{resourceUrl "assets/js/vendor/horizontal_scroll_container.alpine.js" }}
     >
     <template x-if="isScrollable && $screen('{{_viewport}}')">
         <div>

package/dist/views/components/podcast/podcast_player.hbs

@@ -52,11 +52,10 @@
 
     {{!-- Player UI --}}
     <div class="flex {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}}" 
-      x-data="playaudio()"
+      x-data="podcastPlayer()"
       x-init="listenToGlobalStop()"
       ax-load
-      x-ignore
-      ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+      x-ignore>
       {{> components/podcast/components/podcast_player_ui 
         _isPlaylistPlayer=false
         _podcastDuration=duration

package/dist/views/components/podcast/podcast_playlist_player-inline.hbs

@@ -1,11 +1,10 @@
 {{~#with this.remainingPlaylistItems}}
 
   <div  class="flex flex-col col-span-12 gap-5 px-5"
-    x-data="playaudio()" 
+    x-data="podcastPlayer()" 
     x-init="listenToGlobalStop()" 
     ax-load 
-    x-ignore
-    ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+    x-ignore>
       {{#each this}}
         <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
           {{> components/podcast/components/podcast_player_ui

package/dist/views/components/podcast/podcast_playlist_player.hbs

@@ -44,11 +44,10 @@
 
 {{!-- Player UI --}}
 <div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
-  x-data="playaudio()" 
+  x-data="podcastPlayer()" 
   x-init="listenToGlobalStop()" 
   ax-load 
-  x-ignore
-  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+  x-ignore>
     {{#each this.playlistItems}}
       <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
         {{> components/podcast/components/podcast_player_ui