hr-design-system-handlebars 1.61.4 → 1.63.0

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

@@ -1,4 +1,6 @@
 import SettingsCookie from './globalSettingsCookie.subfeature'
+import DataWrapperContentRefresher from './dataWrapperContentRefresher.subfeature'
+import DataWrapperNoResponsiveIframe from './dataWrapperNoResponsiveIframe.subfeature'
 import {
     fireEvent,
     hr$,
@@ -12,9 +14,9 @@ import {
 } from 'hrQuery'
 
 const ExternalService = function (context) {
-    const { options } = context,
-        { element: rootElement } = context,
-        rootParent = rootElement.parentNode
+    const   { options } = context,
+            { element: rootElement } = context,
+            rootParent = rootElement.parentNode
     let dataPolicyBox = hr$('.js-datapolicy', rootElement)[0]
     const dataPolicyBoxHTML = typeof dataPolicyBox !== 'undefined' ? dataPolicyBox.outerHTML : '',
         contentSettingsButton = hr$('.js-content-settings-button', rootParent)[0],
@@ -33,22 +35,6 @@ const ExternalService = function (context) {
         settingsCookie,
         isExternalServiceLoaded = false
 
-    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 embedExternalService = function (callback) {
         $.ajax({
@@ -84,66 +70,7 @@ const ExternalService = function (context) {
             })
     }
 
-    const handleDatapolicy = function (event) {
-        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)
-        }
-        event.stopPropagation()
-    }
-    const loadServiceWithDataPolicyButton = function () {
-        if (rootElement.children[0].classList.contains('js-datapolicy')) {
-            insertExternalService()
-            isExternalServiceLoaded = true
-            toggleContentSettingsButton()
-        }
-    }
-    const toggleContentSettingsButton = function () {
-        if (isExternalServiceLoaded) {
-            contentSettingsButton.classList.remove('hideExtButton')
-        } else {
-            contentSettingsButton.classList.add('hideExtButton')
-        }
-        console.log('Toggle den Einstellungsbutton außerhalb weil ' + isExternalServiceLoaded)
-    }
-
-    const removeDatapolicyBox = function () {
-        rootElement.innerHTML = ''
-        rootElement.classList.remove('c-dataPolicy')
-    }
-
-    const initDataPolicy = function () {
-        if (dataPolicyCheck) {
-            settingsCookie = new SettingsCookie()
-            acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
-            listen('click', handleDatapolicy, acceptButton)
-            if (isWebview) {
-                if (settingsCookie.isDataPolicyCookieAccepted(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)
-        } else {
-            insertExternalService()
-        }
-    }
-
-    const insertExternalService = function () {
+   const insertExternalService = function () {
         switch (embedType) {
             case 'js':
                 switch (id) {
@@ -197,41 +124,21 @@ const ExternalService = function (context) {
         rootElement.appendChild(script)
     }
 
-    const createDataWrapperUniqueID = function () {
-        return Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, '')
-            .substr(2, 10)
-    }
     const createDataWrapperEmbed = function () {
         removeDatapolicyBox()
-        var uniqueID = createDataWrapperUniqueID()
-        if (iFrameConfig.noResponsiveIframe == 'true') {
-            var parentDiv = document.createElement('div')
-            parentDiv.className = 'copytext__scrollWrapper'
-            var div = document.createElement('div')
-            if (iFrameConfig.aspectRatio === undefined) {
-                div.className = 'noaspect_datawrapper_cdn'
-                div.style.height = iFrameConfig.fixedHeight + 'px'
-                div.style.width = '100%'
-            } else {
-                div.className = 'ar--' + iFrameConfig.aspectRatio + ' datawrapper_cdn'
-            }
-            var iframe = document.createElement('iframe')
-            iframe.className = 'ar_iframe datawrapper_cdn'
-            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
+        var uniqueID = function () {
+            return Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, '')
+            .substring(2, 10)
+        }
+        let contentRefresher = new DataWrapperContentRefresher(context, uniqueID)
+        let noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
 
-            div.appendChild(iframe)
-            parentDiv.appendChild(div)
-            rootElement.appendChild(parentDiv)
-        } else {
+        if (iFrameConfig.noResponsiveIframe == 'true') {
+            noResponsiveIframe.createNoResponsiveIframe(getAspectRatioClass())
+        } 
+        else {
             var iframe = document.createElement('iframe')
             iframe.className = 'dataWrapper-embed'
             iframe.style.width = '0'
@@ -252,78 +159,7 @@ const ExternalService = function (context) {
                 true
             )
             if (iFrameConfig.refreshContent == 'true') {
-                var remainingTime
-                var timer
-                var iframeRefresh = document.getElementById('datawrapper-chart-' + uniqueID)
-                var divCounter = document.createElement('div')
-                var divOverlay = document.createElement('div')
-                var 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'
-                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'
-                rootElement.appendChild(divCounter)
-                rootElement.appendChild(divOverlay)
-
-                const refreshIframe = function () {
-                    console.log('Reload')
-                    iframeRefresh.style.opacity = '0'
-                    iframeRefresh.src =
-                        iframeRefresh.src.split('?')[0] + '?_=' + new Date().getTime()
-                    clearInterval(timer)
-                }
-                const startCountdown = function () {
-                    remainingTime = Number(iFrameConfig.refreshIntervall)
-                    setTimeout(function () {
-                        iframeRefresh.style.opacity = '1'
-                        document.getElementById('overlay' + uniqueID).style.display = 'none'
-                    }, 1000)
-                    timer = setInterval(function () {
-                        checkTimer()
-                    }, 1000)
-                }
-                const checkTimer = function () {
-                    if (remainingTime >= 0) {
-                        document.getElementById('counter' + uniqueID).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 =
-                                'Zeitintervall wird neu gestartet...'
-                        }
-                    } else {
-                        refreshIframe()
-                        startCountdown()
-                    }
-                }
-                const secondsToTimeString = function (seconds) {
-                    return new Date(seconds * 1000).toISOString().substr(14, 5)
-                }
-                startCountdown()
+                contentRefresher.createRefresher()
             }
         }
     }
@@ -373,7 +209,7 @@ const ExternalService = function (context) {
             embedCode +
             "?utm_source=ig_embed&amp;utm_campaign=loading'" +
             "data-instgrm-version='14'" +
-            "style='background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:660px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);' >" +
+            "style='background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:724px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);' >" +
             '</blockquote>'
         replaceAnimated(rootElement, instagramEmbedCode, false, reloadInstagramEmbed)
     }
@@ -415,6 +251,27 @@ const ExternalService = function (context) {
         }, 250)
     }
 
+    const getAspectRatioClass = function () {
+        switch (iFrameConfig.aspectRatio) {
+            case '16x9':
+                return "ar-16-9"
+            case '16x7':
+                return "ar-16-7"
+            case '4x3':
+                return "ar-4-3"
+            case '100x27':
+                return "ar-100-27"
+            case '100':
+                return "ar-1-1"                
+            case '9x16':
+                return "ar-9-16"
+            case '7x16':
+                return "ar-7-16"
+            default:
+                return "ar-16-9"
+        }   
+    }
+
     const loadIframe = function () {
         console.log('load iframe ' + id)
         iframe =
@@ -425,13 +282,13 @@ const ExternalService = function (context) {
             "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
         if (iFrameConfig.aspectRatio) {
             iframe =
-                "<div class='copytext__scrollWrapper'><div class='ar--" +
-                iFrameConfig.aspectRatio +
+                "<div class='copytext__scrollWrapper'><div class='" +
+                getAspectRatioClass() +
                 ' ' +
                 id +
                 "'><iframe id='i_frame' data-isloaded='0' src='" +
                 embedCode +
-                "' frameborder='0' class='" +
+                "' frameborder='0' class='w-full h-full " +
                 iFrameConfig.heightClass +
                 ' ' +
                 id +
@@ -442,14 +299,14 @@ const ExternalService = function (context) {
                 iframe =
                     "<div class='copytext__scrollWrapper -fixedHeight' style='height:" +
                     iFrameConfig.fixedHeight +
-                    "px'><iframe data-isloaded='0' src='" +
+                    "px'><iframe data-isloaded='0' class='w-full h-full' src='" +
                     embedCode +
                     "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
                 iframe =
                     "<div class='copytext__scrollWrapper " +
                     id +
-                    "'><iframe data-isloaded='0' src='" +
+                    "'><iframe data-isloaded='0' class='w-full h-full' src='" +
                     embedCode +
                     "' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
@@ -458,6 +315,66 @@ const ExternalService = function (context) {
         replaceAnimated(rootElement, iframe, false)
     }
 
+    const initDataPolicy = function () {
+        if (dataPolicyCheck) {
+            settingsCookie = new SettingsCookie()
+            acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
+            listen('click', handleDatapolicy, acceptButton)
+            if (isWebview) {
+                if (settingsCookie.isDataPolicyCookieAccepted(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)
+        } else {
+            insertExternalService()
+        }
+    }
+
+    const handleDatapolicy = function (event) {
+        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)
+        }
+        event.stopPropagation()
+    }
+
+    const loadServiceWithDataPolicyButton = function () {
+        if (rootElement.children[0].classList.contains('js-datapolicy')) {
+            insertExternalService()
+            isExternalServiceLoaded = true
+            toggleContentSettingsButton()
+        }
+    }
+    const toggleContentSettingsButton = function () {
+        if (isExternalServiceLoaded) {
+            contentSettingsButton.classList.remove('hidden')
+        } else {
+            contentSettingsButton.classList.add('hidden')
+        }
+        console.log('Toggle den Einstellungsbutton außerhalb weil ' + isExternalServiceLoaded)
+    }
+
+    const removeDatapolicyBox = function () {
+        rootElement.innerHTML = ''
+        rootElement.classList.remove('c-dataPolicy')
+    }
+
     const removeExternalService = function () {
         replaceAnimated(rootElement, dataPolicyBoxHTML, true, reinitiateDataPolicyBox)
     }
@@ -471,6 +388,23 @@ const ExternalService = function (context) {
         initDataPolicy()
         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')

package/dist/views/components/content/copytext/components/externalservice.hbs

@@ -1,80 +1,5 @@
-{{~#if (isStorybook)~}}
-    
-    {{#with this.toModel.externalService}}
-    
-        <!--div>serviceUrl: <b>{{this.serviceUrl}}</b></div-->
-        <div>externalServiceName: <b>{{this.externalServiceConfig.externalServiceName}}</b></div>
-        <div>makeConfigurable: <b>{{this.externalServiceConfig.makeConfigurable}}</b></div>
-        <div>externalServiceId: <b>{{this.externalServiceConfig.externalServiceId}}</b></div>
-        <div>externalServiceEmbedType: <b>{{this.externalServiceConfig.externalServiceEmbedType}}</b></div>
-        <div>embedAsIFrame: <b>{{this.externalServiceConfig.embedAsIFrame}}</b></div>
-        <div>fixedHeight: <b>{{this.fixedHeight}}</b></div>
-        <div>aspectRatio: <b>{{this.aspectRatio}}</b></div>
-        <div>setResponsiveIframe: <b>{{this.setResponsiveIframe}}</b></div>
-        <div>setTimedReloadIframe: <b>{{this.setTimedReloadIframe}}</b></div>
-        <div>setTimeForReload: <b>{{this.setTimeForReload}}</b></div>
-        <div>externalServiceCaption: <b>{{this.externalServiceCaption}}</b></div>
-        
-        {{> components/externalService/externalservice }}
+{{#with this.toModel.externalService}}
 
-    {{/with}}
+    {{> components/externalService/external_service }}
 
-{{~else~}}
-    {{#with this.toModel.externalService}}
-        {{#if this.externalServiceConfig.makeConfigurable}}
-            {{~> modules/externalService/externalService~}}
-        {{else}}
-            {{#if this.externalServiceConfig.embedAsIFrame}}
-                {{#if this.fixedHeight}}
-                    {{#if this.serviceUrl}}
-                        <div class="copytext__externalService">
-                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
-                            <div class="copytext__scrollWrapper -fixedHeight"
-                                    style="height:{{this.fixedHeight}}px;">
-                                <iframe frameborder="0" width="100%" height="100%"
-                                        src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
-                                        allowfullscreen scrolling='no'></iframe>
-                            </div>
-                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
-                            {{#with this.externalServiceCaption}}
-                                <div class="copytext__captionLine">
-                                    <span class="figcaption">{{this}}</span>
-                                </div>
-                            {{/with}}
-                        </div>
-                    {{/if}}
-                {{else}}
-                    {{#if this.serviceUrl}}
-                        <div class="copytext__externalService">
-                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
-                            <div class="copytext__scrollWrapper">
-                                <div class="ar--{{defaultIfEmpty this.aspectRatio "auto"}}">
-                                    <iframe frameborder="0" class="ar__content" width="100%" height="100%"
-                                            src="{{{this.serviceUrl}}}" webkitallowfullscreen
-                                            mozallowfullscreen allowfullscreen></iframe>
-                                </div>
-                            </div>
-                            {{#with this.externalServiceCaption}}
-                                <div class="copytext__captionLine">
-                                    <span class="figcaption">{{this}}</span>
-                                </div>
-                            {{/with}}
-                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
-                        </div>
-                    {{/if}}
-                {{/if}}
-            {{else}}
-                <div class="copytext__externalService">
-                    <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-                            data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
-                    </div>
-                    {{#with this.externalServiceCaption}}
-                        <div class="copytext__captionLine js-externalservice__caption">
-                            <span class="figcaption">{{this}}</span>
-                        </div>
-                    {{/with}}
-                </div>
-            {{/if}}
-        {{/if}}
-    {{/with}}
-{{~/if~}}
+{{/with}}

package/dist/views/components/content/copytext/copytext.hbs

@@ -127,4 +127,13 @@
             {{> components/content/copytext/components/jobposting }}
         {{/if}}
     {{/each}}
-</div>
+</div>
+{{! Globaler Einstellungsbutton; nur für Copytext/Externe Dienste Story; 
+damit der Einstellungsdialog aufgerufen werden kann }}
+{{~#if (isStorybook)~}}
+    {{#with @root.dataPolicy}}
+        <div class="p-4 bg-footer-bg mt-14">
+            {{~> components/dataPolicySettings/data_policy_settings ~}}
+        </div>
+    {{/with}}
+{{~/if~}}

package/dist/views/components/event/label_byline.ssi.hbs

@@ -3,7 +3,7 @@
         {{> components/event/event_status _css="ml-2" _status=(loca this.statusDescriptionForLabelShort)}} 
     {{else}}
         {{#> components/text/byline _css="ml-2"}}
-            {{this.startDateTime.date}}, {{this.startDateTime.time}} Uhr
+            {{this.startDateTime.date}}{{#if this.hasStartTime}}, {{this.startDateTime.time}} Uhr{{/if}}
         {{/components/text/byline}}
     {{/if}}
 {{/with}}

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

@@ -0,0 +1,5 @@
+{{#with this.externalServiceCaption}}
+    <div class="py-2.5">
+        <span class="text-sm font-copy dark:text-text-dark">{{this}}</span>
+    </div>
+{{/with}}

package/{src/stories/views/components/externalService → dist/views/components/externalService/components}/external_service_data_policy.hbs

@@ -1,19 +1,19 @@
-<div id="service--{{nextRandom}}" class="p-10 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr js-datapolicy">
+<div id="service--{{nextRandom}}" class="grid col-span-12 p-10 sm:mx-0 bg-highlight-1 rounded-tl-hr rounded-br-hr js-datapolicy">
     <h3 class="text-2xl font-headingSerif">
         {{loca "ext_service_datapolicy_headline" this.externalServiceConfig.externalServiceName}}
     </h3>
     <div class="">
         <p class="pt-4 text-base font-copy">
             {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
-            {{~> components/externalService/data_policy_link ~}}
+            {{~> components/externalService/components/data_policy_link ~}}
         </p>
         <div class="pt-4">
-            {{~> components/externalService/external_service_form_checkbox ~}}
+            {{~> components/externalService/components/external_service_form_checkbox ~}}
         </div>
-        <div class="pt-4 float-right">
+        <div class="float-right pt-4">
             {{#with this}}
                 <div class="inline-flex">
-                 {{~> components/externalService/external_service_settings_button ~}}
+                 {{~> components/externalService/components/external_service_settings_button ~}}
                 {{#*inline "htmlProperties"}}
                     data-piano-tracking='{"label":"DSGVO-Overlay"}'
                     data-a11y-dialog-show="datapolicy-settings-dialog"
@@ -21,7 +21,7 @@
                 </div>
             {{/with}}
             <div class="inline-flex">
-            {{~> components/externalService/external_service_load_content_button ~}}
+            {{~> components/externalService/components/external_service_load_content_button ~}}
             {{#*inline "htmlProperties"}}{{/inline}}
             </div>
         </div>

package/{src/stories/views/components/externalService → dist/views/components/externalService/components}/external_service_form_checkbox.hbs

@@ -1,11 +1,11 @@
 <fieldset>
     <div class="mt-6 space-y-6">
     <div class="relative flex gap-x-3">
-        <div class="flex h-6 items-center">
+        <div class="flex items-center h-6">
         <input id="dataPolicyAcceptPermanently-{{getRandom}}" name="dataPolicyAcceptPermanently"
                     title="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
                     placeholder="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
-                    value="0" required="" type="checkbox" class="h-6 w-6 rounded border-gray text-indigo focus:ring-indigo">
+                    value="0" required="" type="checkbox" class="w-6 h-6 rounded js-dataPolicy-acceptPermanentely border-gray text-indigo focus:ring-indigo">
         </div>
         <div class="text-sm leading-6">
         <label for="dataPolicyAcceptPermanently-{{getRandom}}" class="text-base font-copy">

package/dist/views/components/externalService/{external_service_load_content_button.hbs → components/external_service_load_content_button.hbs}

@@ -1,4 +1,4 @@
-{{#> components/button/button _size="md" _variant="primary" _css="" _type="button"}}
-            {{> components/button/components/button_label _label="Inhalte anzeigen"}}
+{{#> components/button/button _size="md" _variant="primary" _css="js-dataPolicy-accept" _type="submit"}}
             {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="Inhalte anzeigen"}}
 {{/components/button/button}}

package/{src/stories/views/components/externalService → dist/views/components/externalService/components}/external_service_settings_button.hbs

@@ -1,6 +1,6 @@
 {{#> components/button/button _size="md" _variant="tertiary" _css="" _type="button"}}
-            {{> components/button/components/button_label _label="Einstellungen"}}
             {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="Einstellungen"}}
 {{/components/button/button}}
 {{#*inline "htmlProperties"}}
     data-piano-tracking='{"label":"","secondLevelId":}'

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

@@ -1,17 +1,35 @@
-<div class="grid">
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
-        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-             data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":"ar_iframe"{{#if
-                 this.fixedHeight}},"fixedHeight":"{{this.fixedHeight}}", "fixedHeightClass":"-fixedHeight"{{else}},{{#if
-                 this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"}}'>
-            {{~> components/externalService/external_service_data_policy ~}}
+{{#if this.externalServiceConfig.makeConfigurable}}
+    
+    {{> components/externalService/external_service_with_datapolicy_check }}
+
+{{else}}
+    
+    {{#if this.serviceUrl}}
+        <div class="clear-both mt-10">
+            <span class="sr-only">{{loca "story_externalservice_intro_sr" }}</span>    
+            {{#if this.externalServiceConfig.embedAsIFrame}}              
+                    
+                <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
+                    {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio  '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
+                        <iframe frameborder="0" width="100%" height="100%"
+                                src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
+                                allowfullscreen scrolling='no'>
+                        </iframe>
+                    {{#unless this.fixedHeight}}</div>{{/unless}}                        
+                </div>
+            
+            {{else}}
+            
+                <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
+                </div>
+                
+            {{/if}}
+                
+            {{~> components/externalService/components/external_service_caption ~}}
+            
+            <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
-        {{~> components/externalService/external_service_caption ~}}
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
-        <div >
-            <div class="float-right">
-            {{~> components/externalService/external_service_settings_button ~}}
-            </div>
-        </div>
-</div>
-{{~> components/dataPolicySettings/data_policy_settings ~}}
+    {{/if}}
+
+{{/if}}