hr-design-system-handlebars 1.124.10 → 1.125.1

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.125.1 (Wed Dec 17 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3046 b - added cookie and some top button fixes [#1331](https://github.com/mumprod/hr-design-system-handlebars/pull/1331) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# 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

package/dist/assets/index.css

@@ -1741,6 +1741,9 @@ article #commentList {
 .h-2 {
   height: 0.5rem;
 }
+.h-22 {
+  height: 5.5rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -3906,7 +3909,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1765889322588;
+  counter-reset: cnt1765981088136;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4367,7 +4370,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1765889322588 1;
+  counter-increment: cnt1765981088136 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4385,7 +4388,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(cnt1765889322588);
+  content: counter(cnt1765981088136);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/alpine.js

@@ -46,6 +46,7 @@ Alpine.store('serviceID', {
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
 Alpine.store('footerIsVisible', false)
+Alpine.store('appBannerIsVisible', false)
 Alpine.store('sectionNavIsVisible', false)
 Alpine.store('sharingIsVisible', false)
 Alpine.store('sharingIsOpen', {

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

@@ -1,4 +1,5 @@
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
 
 export default function appBanner() {
     return {
@@ -6,24 +7,37 @@ export default function appBanner() {
         deferredPrompt: null,
         isAndroid: /Android/i.test(navigator.userAgent),
         packageId: "de.hr.hessenschau",
+        cookie: {},
+        cookieLifetime: 1000 * 60 * 60 * 24 * 30, 
         init: function () {
-
-            if(this.isAndroid){
+            this.readTrackingCookie()
+            if(this.cookie["closed"] !== true){
+                if(this.isAndroid){
+                    this.showBanner = true;
+                    this.$store.appBannerIsVisible = true;
+                }
+            }    
+            if(window.IS_STORYBOOK){ 
                 this.showBanner = true;
+                this.$store.appBannerIsVisible = true;
             }
             
-            if(window.IS_STORYBOOK){ this.showBanner = true;}
         },
         installClickHandler: function(){
             this.openPlayStore()
+            this.writeCookie()
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         },
         closeClickHandler: function(){
             uxAction('appBanner::bannerClosed');
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
+            this.writeCookie()
         },
         openPlayStore: function() {
             let fallbackTriggered = false;
+            uxAction('appBanner::playStoreOpened');
 
             const fallback = () => {
                 if (fallbackTriggered) return;
@@ -45,6 +59,13 @@ export default function appBanner() {
                 `#Intent;scheme=market;package=com.android.vending;end`;
 
             setTimeout(fallback, 700);
+        },
+        writeCookie: function() {
+            this.cookie["closed"] = true
+            setJSONCookie('appBanner', this.cookie, this.cookieLifetime)
+        },
+        readTrackingCookie: function() {
+            this.cookie = getJSONCookie('appBanner') || {}
         }
     }
 }

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

@@ -14,9 +14,13 @@ export default function nativeAppBanner() {
                 // Update UI notify the user they can add to home screen
                 if(this.isAndroid){
                     this.showBanner = true;
+                    this.$store.appBannerIsVisible = true;
                 }
             });
-            if(window.IS_STORYBOOK){ this.showBanner = true;}
+            if(window.IS_STORYBOOK){
+                this.showBanner = true;
+                this.$store.appBannerIsVisible = true;
+            }
         },
         installClickHandler: function(){
             if(this.deferredPrompt){
@@ -35,10 +39,12 @@ export default function nativeAppBanner() {
                     });
             }
             this.showBanner = false
+            this.$store.appBannerIsVisible = false
         },
         closeClickHandler: function(){
             uxAction('nativeAppBanner::bannerClosed');
             this.showBanner = false
+            this.$store.appBannerIsVisible = 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