hr-design-system-handlebars 1.34.6 → 1.35.0

package/dist/assets/index.css

@@ -423,7 +423,7 @@ video {
         font-stretch: condensed;
     }
 
-.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .active\:scale-95 {
+.-translate-x-1\/2, .-translate-x-2\/4, .-translate-y-1\/2, .-rotate-45, .rotate-180, .rotate-45, .scale-50, .scale-y-100, .scale-y-90, .transform, .is-loading::after, .hover\:scale-105, .active\:scale-95 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -1057,6 +1057,9 @@ video {
 .left-2\/4 {
   left: 50%;
 }
+.left-\[4px\] {
+  left: 4px;
+}
 .right-0 {
   right: 0px;
 }
@@ -1090,6 +1093,9 @@ video {
 .top-8 {
   top: 2rem;
 }
+.top-\[3px\] {
+  top: 3px;
+}
 .top-\[41px\] {
   top: 41px;
 }
@@ -1117,6 +1123,9 @@ video {
 .z-30 {
   z-index: 30;
 }
+.z-300 {
+  z-index: 300;
+}
 .order-1 {
   order: 1;
 }
@@ -1153,6 +1162,9 @@ video {
 .m-4 {
   margin: 1rem;
 }
+.m-auto {
+  margin: auto;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1204,6 +1216,9 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
+.-mb-1 {
+  margin-bottom: -0.25rem;
+}
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -1357,6 +1372,9 @@ video {
 .inline {
   display: inline;
 }
+.\!flex {
+  display: flex !important;
+}
 .flex {
   display: flex;
 }
@@ -1420,6 +1438,12 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-\[19px\] {
+  height: 19px;
+}
+.h-\[25px\] {
+  height: 25px;
+}
 .h-\[9px\] {
   height: 9px;
 }
@@ -1520,6 +1544,12 @@ video {
 .w-\[1600px\] {
   width: 1600px;
 }
+.w-\[19px\] {
+  width: 19px;
+}
+.w-\[50px\] {
+  width: 50px;
+}
 .w-\[9px\] {
   width: 9px;
 }
@@ -1564,6 +1594,9 @@ video {
 .max-w-3\/4 {
   max-width: 75%;
 }
+.max-w-\[480px\] {
+  max-width: 480px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -1808,6 +1841,9 @@ video {
 .overflow-visible {
   overflow: visible;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -1847,6 +1883,9 @@ video {
 .rounded-2xl {
   border-radius: 1rem;
 }
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1922,6 +1961,10 @@ video {
 .border-none {
   border-style: none;
 }
+.border-\[\#e3e3e3\] {
+  --tw-border-opacity: 1;
+  border-color: rgba(227, 227, 227, var(--tw-border-opacity));
+}
 .border-brandnavigation-border-color {
   border-color: #005293;
   border-color: var(--color-brandnavigation-border-color);
@@ -1999,6 +2042,17 @@ video {
   --tw-bg-opacity: 1 !important;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
 }
+.bg-\[\#d8e9f6\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(216, 233, 246, var(--tw-bg-opacity));
+}
+.bg-\[\#e3e3e3\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(227, 227, 227, var(--tw-bg-opacity));
+}
+.bg-black\/\[0\.5\] {
+  background-color: rgba(0, 0, 0, 0.5);
+}
 .bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
@@ -2151,6 +2205,10 @@ video {
   background-color: #d34600;
   background-color: var(--color-ticker-teaser-timeline-score);
 }
+.bg-toggle-default {
+  background-color: #797979;
+  background-color: var(--color-toggle-default);
+}
 .bg-top-topic-background {
   background-color: #d3e2f4;
   background-color: var(--color-top-topic-background);
@@ -2246,6 +2304,9 @@ video {
 .p-5 {
   padding: 1.25rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .p-8 {
   padding: 2rem;
 }
@@ -2289,6 +2350,10 @@ video {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -2945,7 +3010,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1690801221185;
+  counter-reset: cnt1690899159191;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3180,7 +3245,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1690801221185 1;
+  counter-increment: cnt1690899159191 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3196,7 +3261,32 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1690801221185);
+  content: counter(cnt1690899159191);
+}
+/*! ****************************/
+/*! DataPolicy stuff           */
+/*! ****************************/
+.toggleSwitch-checkbox:checked+.toggleSwitch-label::after {
+  left: 27px;
+}
+.toggleSwitch-checkbox:checked+.toggleSwitch-label {
+  background-color: #2c7e13;
+  background-color: var(--color-toggle-confirmation);
+}
+.toggleSwitch-label::after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  height: 21px;
+  width: 21px;
+  border-radius: 1rem;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  --tw-content: '';
+  content: var(--tw-content);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3391,6 +3481,8 @@ video {
     --search-border-color-desktop: transparent;
     --search-border-color-mobile: var(--color-primary-ds);
     --color-ticker-teaser-headline-underline : #ffffff;
+    --color-toggle-confirmation: #2c7e13; 
+    --color-toggle-default: #797979;
 }
 [data-theme='hessenschau'] {
     --color-primary-ds: #005293;
@@ -4534,6 +4626,11 @@ video {
 .empty\:hidden:empty {
   display: none;
 }
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hover\:border-button:hover {
   border-color: var(--color-button);
 }
@@ -4572,6 +4669,10 @@ video {
 .hover\:text-button--dark:hover {
   color: var(--color-button--dark);
 }
+.hover\:text-secondary:hover {
+  color: #606060;
+  color: var(--color-secondary-ds);
+}
 .hover\:text-toplineColor:hover {
   color: #006dc1;
   color: var(--color-topline);
@@ -5379,12 +5480,21 @@ video {
     background-color: transparent;
   }
 
+  .md\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  }
+
   .md\:from-white {
     --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
     --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   }
 
+  .md\:fill-current {
+    fill: currentColor;
+  }
+
   .md\:p-10 {
     padding: 2.5rem;
   }
@@ -5499,6 +5609,11 @@ video {
     line-height: 1rem;
   }
 
+  .md\:text-secondary {
+    color: #606060;
+    color: var(--color-secondary-ds);
+  }
+
   .md\:decoration-2 {
     text-decoration-thickness: 2px;
   }
@@ -5937,10 +6052,6 @@ video {
     background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   }
 
-  .lg\:fill-current {
-    fill: currentColor;
-  }
-
   .lg\:p-0 {
     padding: 0px;
   }

package/dist/assets/js/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -0,0 +1,285 @@
+import DatapolicyCookie from 'components/externalService/datapolicyCookie.subfeature'
+import TrackingCookie from 'components/externalService/trackingCookie.subfeature'
+import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+
+const DataPolicySettings = function (context) {
+    const { options } = context,
+        { element: rootElement } = context,
+        settingsButtons = hr$('.js-data-policy-settings-button', document),
+        overlay = hr$('.js-data-policy-settings-overlay', rootElement)[0],
+        closeButton = hr$('.js-data-policy-settings-close-button', rootElement)[0],
+        bodyElement = document.getElementsByTagName('html')[0],
+        datapolicyCookie = new DatapolicyCookie(),
+        trackingCookie = new TrackingCookie(),
+        toggleSwitches = hr$('.js-toggleSwitch-checkbox', rootElement),
+        toggleSwitchesExternal = hr$('.js-toggleSwitch-external', rootElement),
+        toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', rootElement),
+        toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', rootElement)[0],
+        providerTitle = hr$('.js-providerTitle', rootElement)[0],
+        trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
+    let atiSecondLevelId = window.xtn2,
+        isWebview = window.parent.document.documentElement.classList.contains('webview'),
+        //isWebview = window.location.href.match(/(app)(\.[a-zA-Z]*)(\.de)/i), //App URL ...app.hr.de
+        //isWebview = window.location.href.match(/(app)/i), //App URL ...app.hr.de
+        cookie = {}
+
+        console.log("gelaaaadeeeeeeeen")
+    ///////////////////
+    // OVERLAY START //
+    ///////////////////
+    const showSettingsButton = function () {
+        let settingsButton = document.getElementById('globalSettingsButton')
+        if (isWebview) {
+            console.log('Button Anzeige steuern')
+            readAppSettingsButtonCookie()
+            console.log(cookie['hidePrivacySettingsButton'])
+            if (cookie['hidePrivacySettingsButton'] === true) {
+                settingsButton.style.display = 'none'
+            } else {
+                settingsButton.style.display = 'inline-flex'
+            }
+        } else {
+            settingsButton.style.display = 'inline-flex'
+            console.log('Button immer anzeigen, weil nicht App')
+        }
+    }
+    const readAppSettingsButtonCookie = function () {
+        cookie = getJSONCookie('appSettings') || {}
+    }
+    const writeAppSettingsButtonCookie = function () {
+        cookie = 'true'
+        setJSONCookie('hsAppSettingsButton', cookie, trackingCookieLifetime)
+    }
+    const initializeSettingsButtons = function () {
+        for (let i = 0; i < settingsButtons.length; ++i) {
+            if (settingsButtons.length - i == 1) {
+                listen(
+                    'click',
+                    function () {
+                        openDialog('Footer')
+                        atiSecondLevelId = 1
+                    },
+                    settingsButtons[i]
+                )
+            } else {
+                if (!settingsButtons[i].getAttribute('listener')) {
+                    listen(
+                        'click',
+                        function () {
+                            openDialog('DSGVO-Overlay')
+                        },
+                        settingsButtons[i]
+                    )
+                    settingsButtons[i].setAttribute('listener', 'true')
+                }
+            }
+        }
+    }
+    const openDialog = function (settingsButtonLocation) {
+        overlay.classList.add('!flex')
+        bodyElement.classList.add('optionOpen')
+        uxAction('Einstellungsdialog geöffnet - ' + settingsButtonLocation, atiSecondLevelId)
+    }
+    const closeDialogeOnOverlay = function (e) {
+        if (e.target !== this) return
+        closeDialog()
+    }
+    const closeDialog = function () {
+        overlay.classList.remove('!flex')
+        bodyElement.classList.remove('optionOpen')
+    }
+    const shouldDialogBeOpendOnLoad = function () {
+        const urlParam = getUrlVars()['openDialog']
+        if (typeof urlParam !== 'undefined' && urlParam === 'true') {
+            openDialog('Datenschutzerklärung')
+        }
+    }
+    const getUrlVars = function () {
+        let vars = {}
+        const parts = window.location.href.replace(
+            /[?&]+([^=&]+)=([^&]*)/gi,
+            function (m, key, value) {
+                vars[key] = value
+            }
+        )
+        return vars
+    }
+    ///////////////////
+    // OVERLAY END ////
+    ///////////////////
+
+    /////////////////////
+    // TOGGLES START ////
+    /////////////////////
+
+    const initializeToggleStateExternal = function () {
+        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
+            initializeEventListenerForService(i)
+
+            setListenerForService(toggleSwitchesExternal[i])
+
+            if (isCookieSetForService(toggleSwitchesExternal[i].id)) {
+                toggleSwitchesExternal[i].checked = true
+            } else if (
+                !isCookieExistForService(toggleSwitchesExternal[i].id) &&
+                toggleSwitchesExternal[i].getAttribute('initial') == 'checked'
+            ) {
+                toggleSwitchesExternal[i].checked = true
+                setCookieForService(toggleSwitchesExternal[i])
+            }
+        }
+
+        toggleAllSwitch.checked = allTogglesChecked()
+        changeProviderTitle()
+    }
+    const initializeToggleStateTracking = function () {
+        for (let i = 0; i < toggleSwitchesTracking.length; ++i) {
+            initializeEventListenerForTracking(i)
+
+            setListenerForTracking(toggleSwitchesTracking[i])
+
+            if (isCookieSetForTracking(toggleSwitchesTracking[i].id)) {
+                toggleSwitchesTracking[i].checked = true
+            }
+
+            if (
+                !isCookieExistForTracking(toggleSwitchesTracking[i].id) &&
+                toggleSwitchesTracking[i].getAttribute('initial') == 'checked'
+            ) {
+                toggleSwitchesTracking[i].checked = true
+                setCookieForTracking(toggleSwitchesTracking[i])
+            }
+        }
+    }
+    const initializeEventListenerForService = function (serviceId) {
+        listen(
+            'hr:externalService-activate-' + toggleSwitchesExternal[serviceId].id,
+            function () {
+                toggleSwitchesExternal[serviceId].checked = true
+            },
+            document
+        )
+    }
+    const initializeEventListenerForTracking = function (serviceId) {
+        listen(
+            'hr:trackingService-activate-' + toggleSwitchesTracking[serviceId].id,
+            function () {
+                toggleSwitchesTracking[serviceId].checked = true
+            },
+            document
+        )
+    }
+    const setListenerForService = function (element) {
+        listen(
+            'change',
+            function () {
+                setCookieForService(element)
+                toggleAllSwitch.checked = allTogglesChecked()
+                changeProviderTitle()
+            },
+            element
+        )
+    }
+    const setListenerForTracking = function (element) {
+        listen(
+            'change',
+            function () {
+                setCookieForTracking(element)
+            },
+            element
+        )
+    }
+    const setCookieForService = function (element) {
+        datapolicyCookie.setCookieForExternalService(element.id, element.checked)
+        if (element.checked) {
+            fireEvent('hr:externalService-activate-' + element.id)
+        } else {
+            console.log('fireEvent: hr:externalService-deactivate-' + element.id)
+            fireEvent('hr:externalService-deactivate-' + element.id)
+        }
+    }
+    const setCookieForTracking = function (element) {
+        trackingCookie.setCookieForTracking(element.id, element.checked)
+        if (element.checked) {
+            fireEvent('hr:trackingService-activate-' + element.id)
+        } else {
+            fireEvent('hr:trackingService-deactivate-' + element.id)
+        }
+    }
+    const toggleAll = function () {
+        console.log('Toggle All' + toggleAllSwitch.checked)
+
+        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
+            if (toggleSwitchesExternal[i].checked != toggleAllSwitch.checked) {
+                toggleSwitchesExternal[i].checked = toggleAllSwitch.checked
+                setCookieForService(toggleSwitchesExternal[i])
+            }
+        }
+
+        changeProviderTitle()
+    }
+    const allTogglesChecked = function () {
+        let allChecked
+
+        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
+            if (toggleSwitchesExternal[i].checked) {
+                allChecked = true
+            } else {
+                allChecked = false
+
+                break
+            }
+        }
+        return allChecked
+    }
+    const changeProviderTitle = function () {
+        if (toggleAllSwitch.checked == true) {
+            providerTitle.textContent = 'Alle Anbieter deaktivieren'
+        } else {
+            providerTitle.textContent = 'Alle Anbieter aktivieren'
+        }
+    }
+    const isCookieSetForService = function (externalService) {
+        return datapolicyCookie.isDatapolicyAccepted(externalService)
+    }
+    const isCookieSetForTracking = function (trackingService) {
+        return trackingCookie.isTrackingAccepted(trackingService)
+    }
+    const isCookieExistForService = function (externalService) {
+        return datapolicyCookie.isDatapolicyExistent(externalService)
+    }
+    const isCookieExistForTracking = function (trackingService) {
+        return trackingCookie.isTrackingCookieExistent(trackingService)
+    }
+    const initializeEventListeners = function () {
+        listen('hr:settingsButtonInsideDataPolicyBoxClicked', function () {
+            openDialog('DSGVO-Overlay')
+        })
+        listen('change', toggleAll, toggleAllSwitch)
+        listen('click', closeDialog, closeButton)
+        listen('click', closeDialogeOnOverlay, overlay)
+    }
+    // steuert die Darstellung des Buttons für die hs-App ///
+    showSettingsButton()
+    //// 1. Alle Settings Buttons initialisieren ////
+    initializeSettingsButtons()
+
+    //// 2. Toggle States aller Switches setzen ////
+    ////    Cookies setzen usw.                 ////
+    initializeToggleStateExternal()
+
+    initializeToggleStateTracking()
+
+    //// 3. Event Listener initialisieren ////
+    initializeEventListeners()
+
+    shouldDialogBeOpendOnLoad()
+
+    //// 4. Funktion extern aufrufbar machen ////
+    return {
+        initializeSettingsButtons: initializeSettingsButtons,
+    }
+}
+
+export default DataPolicySettings

package/dist/assets/js/components/externalService/datapolicyCookie.subfeature.js

@@ -0,0 +1,41 @@
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
+
+const DataPolicyCookie = function () {
+    const datapolicyCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10 /* 10 years */
+    let cookie = {}
+
+    const setCookieForExternalService = function (externalService, state) {
+        if (state == null) {
+            state = true
+        }
+        console.log('Schreibe Cookie: ' + externalService + ': ' + state)
+        readDatapolicyCookie()
+        cookie[externalService] = state
+        writeCookie()
+    }
+
+    const isDatapolicyAccepted = function (externalService) {
+        readDatapolicyCookie()
+        return cookie[externalService] === true
+    }
+
+    const writeCookie = function () {
+        setJSONCookie('datapolicy', cookie, datapolicyCookieLifetime)
+    }
+
+    const readDatapolicyCookie = function () {
+        cookie = getJSONCookie('datapolicy') || {}
+    }
+
+    const isDatapolicyExistent = function (externalService) {
+        readDatapolicyCookie()
+        return cookie.hasOwnProperty(externalService)
+    }
+    return {
+        setCookieForExternalService: setCookieForExternalService,
+        isDatapolicyAccepted: isDatapolicyAccepted,
+        isDatapolicyExistent: isDatapolicyExistent,
+    }
+}
+
+export default DataPolicyCookie