hr-design-system-handlebars 1.124.9 → 1.124.10

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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: cnt1765889322588;
 }
 .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: cnt1765889322588 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(cnt1765889322588);
 }
 /*! ****************************/
 /*! 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/views/components/appBanner/nativeAppBanner.hbs

@@ -0,0 +1,27 @@
+<div 
+    x-data="nativeAppBanner()" x-cloak x-show="showBanner" ax-load x-ignore
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    <div class="flex flex-row items-center gap-4 grow">
+        <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
+           <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+

package/dist/views_static/components/appBanner/nativeAppBanner.hbs

@@ -0,0 +1,27 @@
+<div 
+    x-data="nativeAppBanner()" x-cloak x-show="showBanner" ax-load x-ignore
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    <div class="flex flex-row items-center gap-4 grow">
+        <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
+           <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.124.9",
+  "version": "1.124.10",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/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/src/stories/views/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/src/stories/views/components/appBanner/appBanner.mdx

@@ -1,14 +1,14 @@
 import { ArgTypes, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
 import * as AppBannerStories from './appBanner.stories';
 
-import geoTag from './appBanner.hbs'
+import appBanner from './appBanner.hbs'
 
 <Meta of={AppBannerStories} />
 
 export const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${geoTag}</div>`;
-    return geoTag({ ...args })
+    // return `<div>${appBanner}</div>`;
+    return appBanner({ ...args })
 }
 
 # AppBanner
@@ -16,4 +16,3 @@ export const Template = ({ ...args }) => {
 <Canvas withToolbar>
   <Story of={AppBannerStories.AppBanner} />
 </Canvas>
-

package/src/stories/views/components/appBanner/appBanner.stories.js

@@ -1,19 +1,21 @@
 import appBanner from './appBanner.hbs'
+import nativeAppBanner from './nativeAppBanner.hbs'
 
 const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${appBanner}</div>`;
     return appBanner({ ...args })
 }
-
+const NativeTemplate = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${nativeAppBanner}</div>`;
+    return nativeAppBanner({ ...args })
+}
 export default {
     title: 'Komponenten/App Banner',
 
     argTypes: {
-        _text: {
-            control: 'text',
-            description: 'Beschriftung der Ortsmarke',
-        },
+       
     },
 
     decorators: [
@@ -28,6 +30,15 @@ export const AppBanner = {
     name: 'AppBanner',
 
     args: {
-        _text: 'AppBanner',
+      
     },
 }
+export const NativeAppBanner = {
+    render: NativeTemplate.bind({}),
+    name: 'NativeAppBanner',
+
+    args: {
+        
+    },
+}
+

package/src/stories/views/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/src/stories/views/components/appBanner/nativeAppBanner.hbs

@@ -0,0 +1,27 @@
+<div 
+    x-data="nativeAppBanner()" x-cloak x-show="showBanner" ax-load x-ignore
+    id="marketing-banner" tabindex="-1" class="fixed bottom-0 z-50 flex flex-row justify-end w-full gap-4 p-4 -translate-x-1/2 flex-nowrap bg-blue-aqua lg:max-w-7xl left-1/2">
+    <div class="flex flex-row items-center gap-4 grow">
+        <div class="flex items-center justify-center rounded-lg w-11 h-11 bg-blue-congress-hex shrink-0">
+           <img width="24" height="24" src="{{resourceUrl "assets/base/icons/logo/brandlogo--mobile.min.svg" _brand=(defaultIfEmpty this.brand "hessenschau")}}" 
+                class="w-7 h-7" alt="{{loca "meta_application_name"}}">   
+        </div>
+        <div class="flex flex-col items-start text-sm sm:text-base font-heading">
+            <span class="font-bold">hessenschau App</span>
+            <span>Kostenlos bei Google Play</span>
+        </div>
+    </div>
+    <div class="flex items-center gap-4 ">
+        {{#> components/button/button _size="md" _alpineClick="installClickHandler"}}
+            {{> components/button/components/button_label _label="Laden" _css="text-sm sm:text-base"}}
+        {{/components/button/button}}
+        {{#> components/button/button _size="md" _variant="tertiary" _css="h-10" _alpineClick="closeClickHandler"}}
+            {{> components/button/components/button_icon _icon="close" _css="" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="schließen" _css="sr-only"}}
+        {{/components/button/button}}
+    </div>   
+</div>
+
+
+
+