hr-design-system-handlebars 1.124.9 → 1.125.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.125.0 (Tue Dec 16 2025)
+
+#### 🚀 Enhancement
+
+- Recycle/external service js [#1330](https://github.com/mumprod/hr-design-system-handlebars/pull/1330) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.124.10 (Tue Dec 16 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3046 b [#1329](https://github.com/mumprod/hr-design-system-handlebars/pull/1329) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.124.9 (Mon Dec 15 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3906,7 +3906,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1765814559948;
+  counter-reset: cnt1765891425916;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4367,7 +4367,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1765814559948 1;
+  counter-increment: cnt1765891425916 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4385,7 +4385,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1765814559948);
+  content: counter(cnt1765891425916);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -14,6 +14,7 @@ import dropdown from 'components/site_header/dropdown.alpine'
 AsyncAlpine.init(Alpine)
     .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
     .data('appBanner', () => import('components/appBanner/appBanner.alpine.js'))
+    .data('nativeAppBanner', () => import('components/appBanner/nativeAppBanner.alpine.js'))
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )

package/dist/assets/js/components/appBanner/appBanner.alpine.js

@@ -4,38 +4,47 @@ export default function appBanner() {
     return {
         showBanner: false,
         deferredPrompt: null,
+        isAndroid: /Android/i.test(navigator.userAgent),
+        packageId: "de.hr.hessenschau",
         init: function () {
-            window.addEventListener('beforeinstallprompt', (e) => {
-                // Prevent Chrome 67 and earlier from automatically showing the prompt
-                e.preventDefault();
-                // Stash the event so it can be triggered later.
-                this.deferredPrompt = e;
-                // Update UI notify the user they can add to home screen
+
+            if(this.isAndroid){
                 this.showBanner = true;
-            });
+            }
+            
             if(window.IS_STORYBOOK){ this.showBanner = true;}
         },
         installClickHandler: function(){
-            if(this.deferredPrompt){
-                this.deferredPrompt.prompt();
-                // Wait for the user to respond to the prompt
-                this.deferredPrompt.userChoice
-                    .then((choiceResult) => {
-                    if (choiceResult.outcome === 'accepted') {
-                        uxAction('installNativeApp::promt::accepted');
-                        console.log('User accepted the A2HS prompt');
-                    } else {
-                        uxAction('installNativeApp::promt::dismissed');
-                        console.log('User dismissed the A2HS prompt');
-                    }
-                    this.deferredPrompt = null;
-                    });
-            }
+            this.openPlayStore()
             this.showBanner = false
         },
         closeClickHandler: function(){
-            uxAction('installNativeApp::bannerClosed');
+            uxAction('appBanner::bannerClosed');
             this.showBanner = false
+        },
+        openPlayStore: function() {
+            let fallbackTriggered = false;
+
+            const fallback = () => {
+                if (fallbackTriggered) return;
+                fallbackTriggered = true;
+
+                window.open(`https://play.google.com/store/apps/details?id=${this.packageId}`, "googlePlayStore");
+      
+            };
+
+            document.addEventListener('visibilitychange', () => {
+                if (document.hidden) {
+                // App switch happened → cancel fallback
+                fallbackTriggered = true;
+                }
+            }, { once: true });
+
+            window.location.href =
+                `intent://details?id=${this.packageId}` +
+                `#Intent;scheme=market;package=com.android.vending;end`;
+
+            setTimeout(fallback, 700);
         }
     }
 }

package/dist/assets/js/components/appBanner/nativeAppBanner.alpine.js

@@ -0,0 +1,44 @@
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+
+export default function nativeAppBanner() {
+    return {
+        showBanner: false,
+        deferredPrompt: null,
+        isAndroid: /Android/i.test(navigator.userAgent),
+        init: function () {
+            window.addEventListener('beforeinstallprompt', (e) => {
+                // Prevent Chrome 67 and earlier from automatically showing the prompt
+                e.preventDefault();
+                // Stash the event so it can be triggered later.
+                this.deferredPrompt = e;
+                // Update UI notify the user they can add to home screen
+                if(this.isAndroid){
+                    this.showBanner = true;
+                }
+            });
+            if(window.IS_STORYBOOK){ this.showBanner = true;}
+        },
+        installClickHandler: function(){
+            if(this.deferredPrompt){
+                this.deferredPrompt.prompt();
+                // Wait for the user to respond to the prompt
+                this.deferredPrompt.userChoice
+                    .then((choiceResult) => {
+                    if (choiceResult.outcome === 'accepted') {
+                        uxAction('nativeAppBanner::promt::accepted');
+                        console.log('User accepted the A2HS prompt');
+                    } else {
+                        uxAction('nativeAppBanner::promt::dismissed');
+                        console.log('User dismissed the A2HS prompt');
+                    }
+                    this.deferredPrompt = null;
+                    });
+            }
+            this.showBanner = false
+        },
+        closeClickHandler: function(){
+            uxAction('nativeAppBanner::bannerClosed');
+            this.showBanner = false
+        }
+    }
+}

package/dist/assets/js/components/external-service/dataWrapperContentRefresher.subfeature.js

@@ -1,88 +1,95 @@
-        
-const DataWrapperContentRefresher = function (context, id, refreshIntervall, webcomponent, datapolicy) {
-    const { element: rootElement } = context
+const DataWrapperContentRefresher = function ({
+    rootElement,
+    id,
+    refreshIntervall,
+    isWebcomponent,
+    datapolicy,
+}) {
     let remainingTime
     let timer
-    let uniqueID = id
     let intervall = refreshIntervall
     let container
-    let script 
+    let script
     let iframeRefresh
-    
-    if (webcomponent) {
-    container = document.getElementById('datawrapper-chart-' + uniqueID)
-    script = document.getElementById('datawrapper-component-js')
-    }
-    else{
-    iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
+
+    if (isWebcomponent) {
+        container = document.getElementById(`datawrapper-chart-${id}`)
+        script = document.getElementById('datawrapper-component-js')
+    } else {
+        iframeRefresh = document.getElementById(`datawrapper-chart-${id}`)
     }
-    
+
     const createRefresher = function () {
-        console.log("Refresher bauen")
-        let divCounter = document.createElement('div')
+        console.log('Refresher bauen')
+        const divCounter = document.createElement('div')
+        divCounter.id = 'counter' + id
+        Object.assign(divCounter.style, {
+            backgroundColor: '#006dc1',
+            color: '#fff',
+            fontSize: '12px',
+            padding: '8px',
+            borderRadius: '0 0 4px 4px',
+        })
+
         let divOverlay = document.createElement('div')
+        divOverlay.id = 'overlay' + id
+        Object.assign(divOverlay.style, {
+            position: 'absolute',
+            top: '0',
+            display: 'none',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#d8e9f6',
+            width: '100%',
+            height: 'calc(100% - 36px)',
+        })
+
         let divTextOverlay = document.createElement('div')
-        divOverlay.id = 'overlay' + uniqueID
-        divOverlay.style.position = 'absolute'
-        divOverlay.style.top = '0'
-        divOverlay.style.display = 'none'
-        divOverlay.style.alignItems = 'center'
-        divOverlay.style.justifyContent = 'center'
-        divOverlay.style.backgroundColor = '#fff'
-        divOverlay.style.width = '100%'
-        divOverlay.style.height = 'calc(100% - 36px)'
-        divOverlay.style.backgroundColor = '#d8e9f6'
         divTextOverlay.innerHTML = 'Lade Inhalt neu...'
-        divTextOverlay.style.backgroundColor = '#005293'
-        divTextOverlay.style.padding = '8px'
-        divTextOverlay.style.color = '#fff'
-        divTextOverlay.style.fontWeight = '800'
-        divTextOverlay.style.fontFamily = 'RobotoSlab'
-        divTextOverlay.style.borderRadius = '6px 6px 6px 6px'
+        Object.assign(divTextOverlay.style, {
+            backgroundColor: '#005293',
+            padding: '8px',
+            color: '#fff',
+            fontWeight: '800',
+            fontFamily: 'RobotoSlab',
+            borderRadius: '6px',
+        })
+
         divOverlay.appendChild(divTextOverlay)
-        divCounter.id = 'counter' + uniqueID
-        divCounter.style.backgroundColor = '#006dc1'
-        divCounter.style.color = '#fff'
-        divCounter.style.fontSize = '12px'
-        divCounter.style.padding = '8px'
-        divCounter.style.borderRadius = '0 0 4px 4px'
-        
+
         rootElement.style.position = 'relative'
-        if(!datapolicy) {
-        rootElement.appendChild(divCounter)
-        rootElement.appendChild(divOverlay)
-        startCountdown()
-        } 
-        else {
-        rootElement.removeChild(divCounter)
-        rootElement.removeChild(divOverlay)
-        stopCountdown()
+
+        if (!datapolicy) {
+            rootElement.appendChild(divCounter)
+            rootElement.appendChild(divOverlay)
+            startCountdown()
+        } else {
+            rootElement.removeChild(divCounter)
+            rootElement.removeChild(divOverlay)
+            stopCountdown()
         }
     }
 
     const refreshIframe = function () {
         console.log('Reload')
-        if(webcomponent) {
+        if (isWebcomponent) {
             container.style.opacity = '0'
             script.src = script.src.split('?')[0] + '?_=' + new Date().getTime()
-        }
-        else{
+        } else {
             iframeRefresh.style.opacity = '0'
-            iframeRefresh.src =
-                iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
+            iframeRefresh.src = iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
         }
         clearInterval(timer)
     }
     const startCountdown = function () {
         remainingTime = Number(intervall)
         setTimeout(function () {
-            if(webcomponent) {
-                container.style.opacity = '1'    
-            }
-            else{
+            if (isWebcomponent) {
+                container.style.opacity = '1'
+            } else {
                 iframeRefresh.style.opacity = '1'
             }
-            document.getElementById('overlay' + uniqueID).style.display = 'none'
+            document.getElementById('overlay' + id).style.display = 'none'
         }, 1000)
         timer = setInterval(function () {
             checkTimer()
@@ -92,33 +99,34 @@ const DataWrapperContentRefresher = function (context, id, refreshIntervall, web
         clearInterval(timer)
     }
     const checkTimer = function () {
-        if(document.getElementById('counter' + uniqueID) !== null) {
+        if (document.getElementById('counter' + id) !== null) {
             if (remainingTime >= 0) {
-                document.getElementById('counter' + uniqueID).innerHTML =
+                document.getElementById('counter' + id).innerHTML =
                     'Dieser Inhalt wird automatisch aktualisiert in ' +
                     secondsToTimeString(remainingTime) +
                     ' Min.'
                 remainingTime -= 1
                 if (remainingTime == -1) {
-                    document.getElementById('overlay' + uniqueID).style.display = 'flex'
-                    document.getElementById('counter' + uniqueID).innerHTML =
+                    document.getElementById('overlay' + id).style.display = 'flex'
+                    document.getElementById('counter' + id).innerHTML =
                         'Zeitintervall wird neu gestartet...'
                 }
             } else {
                 refreshIframe()
                 startCountdown()
             }
-        }else{
-            console.log("Element wurde entfernt")
+        } else {
+            console.log('Element wurde entfernt')
             clearInterval(timer)
         }
     }
+
     const secondsToTimeString = function (seconds) {
         return new Date(seconds * 1000).toISOString().substr(14, 5)
     }
     return {
-        createRefresher: createRefresher
+        createRefresher: createRefresher,
     }
 }
 
-export default DataWrapperContentRefresher            
+export default DataWrapperContentRefresher

package/dist/assets/js/components/external-service/dataWrapperNoResponsiveIframe.subfeature.js

@@ -1,83 +1,61 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode, lazyLoad) {
-    
-    const { element: rootElement } = context
-    let aspectRatio = configAR
-    let fixedHeight = configFixedHeight
-    let uniqueId = id
-
+const DataWrapperNoResponsiveIframe = function ({
+    rootElement,
+    aspectRatio,
+    fixedHeight,
+    id,
+    embedCode,
+    lazyLoad,
+}) {
     const createNoResponsiveIframe = function () {
-
-   
-    var parentDiv = document.createElement('div')
-    //Auflösen nach Tailwind-Klassen //copytext__scrollWrapper
-    parentDiv.className = '!h-full'
-    var div = document.createElement('div')
-    //Keine Aspect-Ratio ausgewählt aber eine feste Höhe
-    
-    console.log(aspectRatio)
-    console.log(configAR)
-    if (aspectRatio === undefined) {
+        const parentDiv = document.createElement('div')
+        //Auflösen nach Tailwind-Klassen //copytext__scrollWrapper
+        parentDiv.className = '!h-full'
+        const div = document.createElement('div')
+        //Keine Aspect-Ratio ausgewählt aber eine feste Höhe
+        if (aspectRatio === undefined) {
             //Auflösen nach Tailwind-Klassen //noaspect_datawrapper_cdn
             div.className = 'relative overflow-hidden w-0 border-0 !min-w-full'
             div.style.height = fixedHeight + 'px'
             div.style.width = '100%'
-    } 
-    // Aspect-Ratio ausgewählt
-    else {
-        //ar-- in Tailwind-Klassen
-        let tailwindCSS
-        switch(aspectRatio){
-            case '100':
-                tailwindCSS = "ar-1-1" 
-            break;
-            case '16x9':
-                tailwindCSS = "ar-16-9" 
-            break;
-            case '9x16':
-                tailwindCSS = "ar-9-16"
-            break;
-            case '16x7':
-                tailwindCSS = "ar-16-7"
-            break;
-            case '7x16':
-                tailwindCSS = "ar-7-16"
-            break;
-            case '4x3':
-                tailwindCSS = "ar-4-3"
-            break;
-            case '100x27':
-                tailwindCSS = "ar-100-27"
-            break;
-            default:
-                tailwindCSS = "ar-16-9"
-          }
-          
-            div.className = tailwindCSS + " w-full sm480:h-full h-[560px]"
-    }
-    var iframe = document.createElement('iframe')
+        }
+        // Aspect-Ratio ausgewählt
+        else {
+            //ar-- in Tailwind-Klassen
+            const aspectRatiosToCssClasses = {
+                '100': 'ar-1-1',
+                '16x9': 'ar-16-9',
+                '9x16': 'ar-9-16',
+                '16x7': 'ar-16-7',
+                '7x16': 'ar-7-16',
+                '4x3': 'ar-4-3',
+                '100x27': 'ar-100-27',
+            }
+            const tailwindCSS = aspectRatiosToCssClasses[aspectRatio] || 'ar-16-9'
+            div.className = `${tailwindCSS} w-full sm480:h-full h-[560px]`
+        }
+        var iframe = document.createElement('iframe')
 
-    //Auflösen nach Tailwind-Klassen //ar_iframe datawrapper_cdn
-    iframe.setAttribute('class', 'border-0 top-0 left-0 w-full h-full overflow-y-hidden')
-    iframe.setAttribute('id', 'i_frame')
-    iframe.setAttribute('data-isloaded', '0')
-    iframe.setAttribute('webkitallowfullscreen', '')
-    iframe.setAttribute('mozallowfullscreen', '')
-    iframe.setAttribute('allowfullscreen', '')
-    iframe.setAttribute('scrolling', 'no')
-    iframe.setAttribute('frameborder', '0')
-    iframe.src = embedCode
-    iframe.id = 'datawrapper-chart-' + uniqueId
-    if (lazyLoad) {
-        iframe.loading = "lazy";
-    }
-    
-    div.appendChild(iframe)
-    parentDiv.appendChild(div)
-    rootElement.appendChild(parentDiv)
+        //Auflösen nach Tailwind-Klassen //ar_iframe datawrapper_cdn
+        iframe.className = 'border-0 top-0 left-0 w-full h-full overflow-y-hidden'
+        iframe.id = 'datawrapper-chart-' + id
+        iframe.setAttribute('data-isloaded', '0')
+        iframe.setAttribute('webkitallowfullscreen', '')
+        iframe.setAttribute('mozallowfullscreen', '')
+        iframe.setAttribute('allowfullscreen', '')
+        iframe.setAttribute('scrolling', 'no')
+        iframe.setAttribute('frameborder', '0')
+        iframe.src = embedCode
+        if (lazyLoad) {
+            iframe.loading = 'lazy'
+        }
+
+        div.appendChild(iframe)
+        parentDiv.appendChild(div)
+        rootElement.appendChild(parentDiv)
     }
     return {
-        createNoResponsiveIframe: createNoResponsiveIframe
+        createNoResponsiveIframe: createNoResponsiveIframe,
     }
 }
 
-export default DataWrapperNoResponsiveIframe      
+export default DataWrapperNoResponsiveIframe