hr-design-system-handlebars 1.82.9 → 1.82.11

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.82.11 (Thu Jul 18 2024)
+
+#### 🐛 Bug Fix
+
+- Fixing setting button behaviour [#1016](https://github.com/mumprod/hr-design-system-handlebars/pull/1016) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
+# v1.82.10 (Thu Jul 18 2024)
+
+#### 🐛 Bug Fix
+
+- Removing App-Cookie Fallback [#1005](https://github.com/mumprod/hr-design-system-handlebars/pull/1005) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.82.9 (Wed Jul 17 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3336,7 +3336,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1721224582378;
+  counter-reset: cnt1721303344884;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3734,7 +3734,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1721224582378 1;
+  counter-increment: cnt1721303344884 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3750,7 +3750,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1721224582378);
+  content: counter(cnt1721303344884);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -1,6 +1,4 @@
 import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
-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/pianoHelper.subfeature'
 
@@ -12,16 +10,10 @@ const DataPolicySettings = function (context) {
         { element: rootElement } = context,
         container = hr$('#datapolicy-settings-dialog',document)[0],
         dialog = new A11yDialog(container),
-        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(),
         settingsCookie = new SettingsCookie(),
         toggleSwitches = hr$('.js-toggleSwitch-checkbox', container),
         toggleSwitchesExternal = hr$('.js-toggleSwitch-external', container),
-        toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', container),
         toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', container)[0],
         providerTitle = hr$('.js-providerTitle', container)[0]
 
@@ -192,18 +184,33 @@ const DataPolicySettings = function (context) {
         appSettingsCookie = getJSONCookie('appSettings') || {}
     }
 
-    //Für die hs-App wird der Button ein und ausgeblendet
+    //Für die hs-App wird der Globale Einstellungsbutton ein- und ausgeblendet, 
+    //sowie der Einstellungsbutton für einen einzelnen externen Dienst, sobald dieser einmalig oder dauerhaft aktiviert wurde
     const showSettingsButton = function () {
         let settingsButton = document.getElementById('globalSettingsButton')
         if (isWebview) {
             readAppSettingsButtonCookie()
             if (appSettingsCookie['hidePrivacySettingsButton'] === true) {
-                settingsButton.style.display = 'none'
+                settingsButton.classList.add('hidden')
+                document.querySelectorAll('.js-settings-inner-button').forEach(function(jsSettingsButton) {
+                    jsSettingsButton.classList.add('hidden')
+                });
+                document.querySelectorAll('.js-content-settings-button').forEach(function(jsContentSettingsButton) {
+                    jsContentSettingsButton.style.display = 'none'                    
+                });
             } else {
-                settingsButton.style.display = 'inline-flex'
+                settingsButton.classList.remove('hidden')
+                document.querySelectorAll('.js-settings-inner-button').forEach(function(jsSettingsButton) {
+                    if(jsSettingsButton.classList.contains('hidden')) {
+                    jsSettingsButton.classList.remove('hidden')
+                    }
+                });
+                document.querySelectorAll('.js-content-settings-button').forEach(function(jsContentSettingsButton) {
+                    if(!jsContentSettingsButton.classList.contains('hidden')){
+                    jsContentSettingsButton.style.display = 'inline-block'    
+                    }                
+                });
             }
-        } else {
-            settingsButton.style.display = 'inline-flex'
         }
     }
 

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

@@ -0,0 +1,157 @@
+const CreateWahlGemeindeErgebnis = function (embedCode,rootElement) {
+    let eCode = embedCode,
+        cleanUrl,
+        wahlKreisVersionJsonUrl,
+        wahlkreis,
+        wahlid,
+        jsonResponse,
+        iFrameElement,
+        iframeHeight = 300
+
+    const createErgebnis = function() {
+        extractDataFromEmbedCode()
+        initMessageEventListener()
+        fetchJsonData()
+    } 
+    const cleanVariables = function (variable) {
+        while (variable.charAt(0) === '&') {
+            variable = variable.substring(1)
+        }
+        return variable
+    }
+    const extractDataFromEmbedCode = function () {
+        const parts = eCode.split('*')
+        if (parts.length === 4) {
+            cleanUrl = cleanVariables(decodeURIComponent(parts[0].trim()))
+            wahlkreis = cleanVariables(decodeURIComponent(parts[1].trim()))
+            wahlid = cleanVariables(decodeURIComponent(parts[2].trim()))
+            wahlKreisVersionJsonUrl = cleanVariables(decodeURIComponent(parts[3].trim()))
+        }
+    }
+    const loadIframe = function (version, url, wahlkreis) {
+        if (version) {
+            let iframeUrl = url.replace('{version}', version)
+            let iframe = document.createElement('iframe')
+            iframe.className = ''
+            iframe.style.border = 'none'
+            iframe.style.height = iframeHeight + 'px'
+            iframe.style.width = '100%'
+            iframe.setAttribute('webkitallowfullscreen', '')
+            iframe.setAttribute('mozallowfullscreen', '')
+            iframe.setAttribute('allowfullscreen', '')
+            iframe.setAttribute('scrolling', 'no')
+            iframe.setAttribute('frameborder', '0')
+            iframe.src = iframeUrl
+            iframe.id = 'wahl-gemeinde-ergebnis-' + wahlkreis
+            rootElement.innerHTML = ''
+            rootElement.insertBefore(iframe, null)
+            iFrameElement = document.getElementById('wahl-gemeinde-ergebnis-' + wahlkreis)
+        } else {
+            loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+        }
+    }
+    const loadNoDataDiv = function (text, timeout) {
+        let div = document.createElement('div')
+        div.className =
+            'p-5 c-externalService__wahl-gemeinde-ergebnis-no-result rounded-tl-hr rounded-br-hr bg-highlight-1'
+        div.innerHTML =
+            '<div class="text-2xl text-clusterTeaserHeadline font-titleCluster mb-2">' +
+            text +
+            '</div>' +
+            '<div class="flex flex-row" >' +
+            '  <div class="">' +
+            '    <span>Dieser Inhalt wird automatisch aktualisiert in</span>' +
+            '    <span data-minutes>' +
+            timeout +
+            '    </span>' +
+            '    <span>Min</span>' +
+            '    <span data-seconds>0</span>' +
+            '    <span>Sek</span>' +
+            '  </div>' +
+            '</div>'
+        rootElement.innerHTML = ''
+        rootElement.insertBefore(div, null)
+        countdownMinutes(timeout, fetchJsonData)
+    }
+    const resizeIframe = function (newheight) {
+        if (newheight !== iframeHeight) {
+            iFrameElement.style.height = newheight + 'px'
+            iframeHeight = newheight
+        }
+    }
+    const processMessage = function (evt) {
+        if (evt.origin !== 'https://www.tagesschau.de') {
+            console.log('message', evt.origin + ' ist nicht vertrauenswürdig')
+        } else {
+            resizeIframe(evt.data)
+        }
+    }
+    const initMessageEventListener = function () {
+        if (window.addEventListener) {
+            // For standards-compliant web browsers
+            window.addEventListener('message', processMessage, false)
+        } else {
+            window.attachEvent('onmessage', processMessage)
+        }
+    }
+    const fetchJsonData = function () {
+        fetch(wahlKreisVersionJsonUrl, {
+            method: 'GET',
+            headers: {
+                Accept: 'application/json',
+            },
+        })
+            .then((response) => response.json())
+            .then((jsonData) =>
+                loadIframe(
+                    jsonData.hasOwnProperty(wahlkreis) && jsonData[wahlkreis].v
+                        ? jsonData[wahlkreis].v
+                        : null,
+                    cleanUrl,
+                    wahlkreis,
+                ),
+            )
+            .catch(function () {
+                loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
+                console.log('No JSON Data Loaded')
+            })
+    }
+
+    function countdownMinutes(minutesToCountdown, callbackFunction) {
+        const second = 1000,
+            minute = second * 60,
+            hour = minute * 60,
+            day = hour * 24,
+            minuteElement = document.querySelector('[data-minutes]'),
+            secondElement = document.querySelector('[data-seconds]')
+
+        function AddMinutesToDate(date, minutes) {
+            return new Date(date.getTime() + minutes * 60000)
+        }
+
+        let countDown = AddMinutesToDate(new Date(), minutesToCountdown),
+            x = setInterval(function () {
+                let now = new Date().getTime(),
+                    distance = countDown - now
+
+                if (minuteElement != null) {
+                    minuteElement.innerText = Math.floor((distance % hour) / minute)
+                }
+
+                if (secondElement != null) {
+                    secondElement.innerText = Math.floor((distance % minute) / second)
+                }
+
+                if (distance < 1000) {
+                    callbackFunction()
+                    clearInterval(x)
+                }
+            }, second)
+    }
+    return {
+        createErgebnis: createErgebnis
+    }
+
+}
+
+export default CreateWahlGemeindeErgebnis     

package/dist/assets/js/components/externalService/externalServiceDs.feature.js

@@ -1,6 +1,7 @@
 import SettingsCookie from './globalSettingsCookie.subfeature'
 import DataWrapperContentRefresher from './dataWrapperContentRefresher.subfeature'
 import DataWrapperNoResponsiveIframe from './dataWrapperNoResponsiveIframe.subfeature'
+import CreateWahlGemeindeErgebnis from './createWahlErgebnisGemeinde.subfeature'
 import {
     fireEvent,
     hr$,
@@ -8,9 +9,7 @@ import {
     loadScript,
     removeScript,
     replaceAnimated,
-    requestTimeout,
-    getJSONCookie,
-    deleteCookie,
+    requestTimeout
 } from 'hrQuery'
 
 const ExternalService = function (context) {
@@ -25,17 +24,16 @@ const ExternalService = function (context) {
         id = options.id,
         iFrameConfig = options.iFrameConfig
     let acceptButton,
-        acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0],
-        dataPolicySettingsButton = hr$('.js-data-policy-settings-button', rootParent)[0]
+        acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0]
     let embedCode = options.embedCode,
         iframe,
         settingsCookie,
         noResponsiveIframe,
         contentRefresher,
+        gemeindewahlergebnis,
         uniqueId,
-        isExternalServiceLoaded = false,
-        isWebview = window.parent.document.documentElement.classList.contains('webview')
-
+        isExternalServiceLoaded = false
+        
     const testDOMElements = function () {
         console.log(rootElement)
         console.log(rootParent)
@@ -58,10 +56,8 @@ const ExternalService = function (context) {
                 console.log('Done')
                 if (undefined !== callback) {
                     replaceAnimated(rootElement, data.html, false, callback)
-                    alert('boing')
                 } else {
                     replaceAnimated(rootElement, data.html, false)
-                    alert('boing, boing')
                 }
             })
             //Add handlers to be called when the Deferred object is rejected.
@@ -104,7 +100,7 @@ const ExternalService = function (context) {
                         createWahlOMatEmbed()
                         break  
                     case 'wahl-gemeinde-ergebnis':
-                        createWahlGemeindeErgebnis()
+                        createWahlGemeindeErgebnisEmbed()
                         break  
                     default:
                         console.error('No JS Config for external service ' + id)
@@ -115,155 +111,10 @@ const ExternalService = function (context) {
                 loadIframe() //für alle Dienste die nicht der DSGVO Datapolicy unterliegen
         }
     }
-    const createWahlGemeindeErgebnis = function () {
-        let embedCode = options.embedCode,
-            cleanUrl,
-            wahlKreisVersionJsonUrl,
-            wahlkreis,
-            wahlid,
-            jsonResponse,
-            iFrameElement,
-            iframeHeight = 300
-
-        const cleanVariables = function (variable) {
-            while (variable.charAt(0) === '&') {
-                variable = variable.substring(1)
-            }
-            return variable
-        }
-        const extractDataFromEmbedCode = function () {
-            const parts = embedCode.split('*')
-            if (parts.length === 4) {
-                cleanUrl = cleanVariables(decodeURIComponent(parts[0].trim()))
-                wahlkreis = cleanVariables(decodeURIComponent(parts[1].trim()))
-                wahlid = cleanVariables(decodeURIComponent(parts[2].trim()))
-                wahlKreisVersionJsonUrl = cleanVariables(decodeURIComponent(parts[3].trim()))
-            }
-        }
-        const loadIframe = function (version, url, wahlkreis) {
-            if (version) {
-                let iframeUrl = url.replace('{version}', version)
-                let iframe = document.createElement('iframe')
-                iframe.className = ''
-                iframe.style.border = 'none'
-                iframe.style.height = iframeHeight + 'px'
-                iframe.style.width = '100%'
-                iframe.setAttribute('webkitallowfullscreen', '')
-                iframe.setAttribute('mozallowfullscreen', '')
-                iframe.setAttribute('allowfullscreen', '')
-                iframe.setAttribute('scrolling', 'no')
-                iframe.setAttribute('frameborder', '0')
-                iframe.src = iframeUrl
-                iframe.id = 'wahl-gemeinde-ergebnis-' + wahlkreis
-                rootElement.innerHTML = ''
-                rootElement.insertBefore(iframe, null)
-                iFrameElement = document.getElementById('wahl-gemeinde-ergebnis-' + wahlkreis)
-            } else {
-                loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
-            }
-        }
-        const loadNoDataDiv = function (text, timeout) {
-            let div = document.createElement('div')
-            div.className =
-                'p-5 c-externalService__wahl-gemeinde-ergebnis-no-result rounded-tl-hr rounded-br-hr bg-highlight-1'
-            div.innerHTML =
-                '<div class="text-2xl text-clusterTeaserHeadline font-titleCluster mb-2">' +
-                text +
-                '</div>' +
-                '<div class="flex flex-row" >' +
-                '  <div class="">' +
-                '    <span>Dieser Inhalt wird automatisch aktualisiert in</span>' +
-                '    <span data-minutes>' +
-                timeout +
-                '    </span>' +
-                '    <span>Min</span>' +
-                '    <span data-seconds>0</span>' +
-                '    <span>Sek</span>' +
-                '  </div>' +
-                '</div>'
-            rootElement.innerHTML = ''
-            rootElement.insertBefore(div, null)
-            countdownMinutes(timeout, fetchJsonData)
-        }
-        const resizeIframe = function (newheight) {
-            if (newheight !== iframeHeight) {
-                iFrameElement.style.height = newheight + 'px'
-                iframeHeight = newheight
-            }
-        }
-        const processMessage = function (evt) {
-            if (evt.origin !== 'https://www.tagesschau.de') {
-                console.log('message', evt.origin + ' ist nicht vertrauenswürdig')
-            } else {
-                resizeIframe(evt.data)
-            }
-        }
-        const initMessageEventListener = function () {
-            if (window.addEventListener) {
-                // For standards-compliant web browsers
-                window.addEventListener('message', processMessage, false)
-            } else {
-                window.attachEvent('onmessage', processMessage)
-            }
-        }
-        const fetchJsonData = function () {
-            fetch(wahlKreisVersionJsonUrl, {
-                method: 'GET',
-                headers: {
-                    Accept: 'application/json',
-                },
-            })
-                .then((response) => response.json())
-                .then((jsonData) =>
-                    loadIframe(
-                        jsonData.hasOwnProperty(wahlkreis) && jsonData[wahlkreis].v
-                            ? jsonData[wahlkreis].v
-                            : null,
-                        cleanUrl,
-                        wahlkreis,
-                    ),
-                )
-                .catch(function () {
-                    loadNoDataDiv('Es liegen zur Zeit noch keine Ergebnisse vor', 5)
-                    console.log('No JSON Data Loaded')
-                })
-        }
-
-        function countdownMinutes(minutesToCountdown, callbackFunction) {
-            const second = 1000,
-                minute = second * 60,
-                hour = minute * 60,
-                day = hour * 24,
-                minuteElement = document.querySelector('[data-minutes]'),
-                secondElement = document.querySelector('[data-seconds]')
-
-            function AddMinutesToDate(date, minutes) {
-                return new Date(date.getTime() + minutes * 60000)
-            }
-
-            let countDown = AddMinutesToDate(new Date(), minutesToCountdown),
-                x = setInterval(function () {
-                    let now = new Date().getTime(),
-                        distance = countDown - now
-
-                    if (minuteElement != null) {
-                        minuteElement.innerText = Math.floor((distance % hour) / minute)
-                    }
-
-                    if (secondElement != null) {
-                        secondElement.innerText = Math.floor((distance % minute) / second)
-                    }
-
-                    if (distance < 1000) {
-                        callbackFunction()
-                        clearInterval(x)
-                    }
-                }, second)
-        }
-
-        extractDataFromEmbedCode()
-        initMessageEventListener()
-        fetchJsonData()
+   
+    const createWahlGemeindeErgebnisEmbed = function () {
+        gemeindewahlergebnis = new CreateWahlGemeindeErgebnis(embedCode,rootElement)
+        gemeindewahlergebnis.createErgebnis()
     }
     const createWahlOMatEmbed = function () {
 
@@ -297,6 +148,7 @@ const ExternalService = function (context) {
         rootElement.appendChild(script)
     }
     const createUniqueID = function() {
+       console.log("Erzeuge einzigartige ID")
        uniqueId = Math.random().toString(36).replace(/[^a-z]+/g, '').substring(2, 10)
     }
 
@@ -324,6 +176,7 @@ const ExternalService = function (context) {
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
         createUniqueID()
+        console.log("UniqueID"+uniqueId)
         if (iFrameConfig.noResponsiveIframe == 'true') {
 
              //Klassisches Iframe mit AR-Wrapper oder fester Höhe
@@ -342,7 +195,7 @@ const ExternalService = function (context) {
                 
                 // Webcomponent
                 const divTag = document.createElement('div')
-                divTag.id = 'datawrapper-chart-' + uniqueID
+                divTag.id = 'datawrapper-chart-' + uniqueId
                 rootElement.insertBefore(divTag, null)
                 const scriptTag = document.createElement('script')
                 scriptTag.setAttribute('id', 'datawrapper-component-js')
@@ -504,18 +357,10 @@ const ExternalService = function (context) {
             settingsCookie = new SettingsCookie()
             acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
             listen('click', handleDatapolicy, acceptButton)
-            if (isWebview) {
-                if (settingsCookie.isDataPolicyCookieAccepted(id)) {
+            if (settingsCookie.isSettingsCookieAccepted(id)) {
                     loadServiceWithDataPolicyButton()
-                } else {
-                    dataPolicyBox.style.visibility = 'visible'
-                }
             } else {
-                if (settingsCookie.isSettingsCookieAccepted(id)) {
-                    loadServiceWithDataPolicyButton()
-                } else {
                     dataPolicyBox.style.visibility = 'visible'
-                }
             }
             listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
             listen('hr:externalService-deactivate-' + id, removeExternalService)
@@ -528,9 +373,6 @@ const ExternalService = function (context) {
         if (acceptAlwaysCheckbox.checked == true) {
             fireEvent('hr:externalService-activate-' + id)
             settingsCookie.setCookieForOptions(id)
-            if (isWebview) {
-                settingsCookie.setCookieForDataPolicy(id)
-            }
         } else {
             loadServiceWithDataPolicyButton()
             console.log('External Service once loaded - ' + id)
@@ -573,22 +415,6 @@ const ExternalService = function (context) {
         toggleContentSettingsButton()
     }
 
-    const syncAppOptionsToSettingsCookie = function () {
-        if (getJSONCookie('datapolicy')) {
-            let dataPolicyCookie = getJSONCookie('datapolicy') || {}
-            let objArray = Object.entries(dataPolicyCookie)
-            objArray.forEach(([key, value]) => {
-                settingsCookie.setCookieForOptions(key, value)
-            })
-        }
-    }
-
-    const setWhitelistServicesForInitialApp = function () {
-        let whitelist = ['ard_mediathek', 'arte_concert', 'arte_concert_new', 'datawrapper_cdn']
-        for (let i = 0; i < whitelist.length; ++i) {
-            settingsCookie.setCookieForDataPolicy(whitelist[i], true)
-        }
-    }
     const resetCheckboxForPermanentService = function () {
         /*Die Autocompletion des Browsers merkt sich die Zustände von Formularelementen nach einem Refresh, das wird hier hart zurückgesetzt*/
         var clist = document.getElementsByClassName('js-dataPolicy-acceptPermanentely')
@@ -599,13 +425,6 @@ const ExternalService = function (context) {
     initDataPolicy()
     resetCheckboxForPermanentService()
     testDOMElements()
-    if (isWebview) {
-        /*Für die App werden Cookie-Daten des neuen Cookies wieder mit dem alten Cookie synchronisiert */
-        syncAppOptionsToSettingsCookie()
-        if (!getJSONCookie('datapolicy') || !getJSONCookie('hrSettings')) {
-            setWhitelistServicesForInitialApp()
-        }
-    }
 }
 
 export default ExternalService

package/dist/views/components/externalService/components/external_service_data_policy.hbs

@@ -13,7 +13,7 @@
         <div class="float-right pt-4">
             {{#with this}}
                 <div class="inline-flex">
-                 {{~> components/externalService/components/external_service_settings_button ~}}
+                 {{~> components/externalService/components/external_service_settings_button _css="js-settings-inner-button"~}}
                 {{#*inline "htmlProperties"}}
                     data-piano-tracking='{"label":"DSGVO-Overlay"}'
                     data-a11y-dialog-show="datapolicy-settings-dialog"

package/dist/views/components/externalService/components/external_service_settings_button.hbs

@@ -1,4 +1,4 @@
-{{#> components/button/button _size="md" _variant="tertiary" _css="" _type="button"}}
+{{#> components/button/button _size="md" _variant="tertiary" _css=_css _type="button"}}
             {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
             {{> components/button/components/button_label _label="Einstellungen"}}
 {{/components/button/button}}

package/dist/views_static/components/externalService/components/external_service_data_policy.hbs

@@ -13,7 +13,7 @@
         <div class="float-right pt-4">
             {{#with this}}
                 <div class="inline-flex">
-                 {{~> components/externalService/components/external_service_settings_button ~}}
+                 {{~> components/externalService/components/external_service_settings_button _css="js-settings-inner-button"~}}
                 {{#*inline "htmlProperties"}}
                     data-piano-tracking='{"label":"DSGVO-Overlay"}'
                     data-a11y-dialog-show="datapolicy-settings-dialog"

package/dist/views_static/components/externalService/components/external_service_settings_button.hbs

@@ -1,4 +1,4 @@
-{{#> components/button/button _size="md" _variant="tertiary" _css="" _type="button"}}
+{{#> components/button/button _size="md" _variant="tertiary" _css=_css _type="button"}}
             {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
             {{> components/button/components/button_label _label="Einstellungen"}}
 {{/components/button/button}}

package/package.json

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

package/src/stories/basics/iconography/page_icon_404_data.js

@@ -2,12 +2,12 @@ const images = require.context('/src/assets/icons/404/svgmap', true);
 
 let imageList = {}
 let file
-let svgList = {}
+let svgList404 = {}
 imageList = images.keys().map(image => images(image));
 
 for(let i=0; i < imageList.length; i++){
     file = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
-    svgList[file] = file
+    svgList404[file] = file
 }
 
-export default svgList;
+export default svgList404;

package/src/stories/basics/iconography/page_icon_epg_data.js

@@ -2,12 +2,12 @@ const images = require.context('/src/assets/icons/epg/svgmap', true);
 
 let imageList = {}
 let file
-let svgList = {}
+let svgListEpg = {}
 imageList = images.keys().map(image => images(image));
 
 for(let i=0; i < imageList.length; i++){
     file = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
-    svgList[file] = file
+    svgListEpg[file] = file
 }
 
-export default svgList;
+export default svgListEpg;