hr-design-system-handlebars 0.55.2 → 0.56.1

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.56.1 (Tue Aug 30 2022)
+
+#### 🐛 Bug Fix
+
+- first try with groups, diverse changes in css, adds load_dynamic for … [#306](https://github.com/mumprod/hr-design-system-handlebars/pull/306) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.56.0 (Tue Aug 30 2022)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 1567 [#305](https://github.com/mumprod/hr-design-system-handlebars/pull/305) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.55.3 (Fri Aug 19 2022)
+
+#### 🐛 Bug Fix
+
+- Content nav part4 [#304](https://github.com/mumprod/hr-design-system-handlebars/pull/304) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.55.2 (Fri Aug 19 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -683,14 +683,6 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-.mx-5 {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
-}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -699,6 +691,14 @@ video {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
 .mx-8 {
   margin-left: 2rem;
   margin-right: 2rem;
@@ -725,11 +725,14 @@ video {
 .\!mt-4 {
   margin-top: 1rem !important;
 }
+.\!mb-0 {
+  margin-bottom: 0px !important;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.\!mb-0 {
-  margin-bottom: 0px !important;
+.\!mr-2 {
+  margin-right: 0.5rem !important;
 }
 .mr-2 {
   margin-right: 0.5rem;
@@ -822,9 +825,6 @@ video {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-10 {
   height: 2.5rem;
 }
@@ -837,6 +837,9 @@ video {
 .h-full {
   height: 100%;
 }
+.h-auto {
+  height: auto;
+}
 .h-0\.5 {
   height: 0.125rem;
 }
@@ -858,9 +861,6 @@ video {
 .h-2\/5 {
   height: 40%;
 }
-.h-auto {
-  height: auto;
-}
 .h-3\.5 {
   height: 0.875rem;
 }
@@ -882,18 +882,20 @@ video {
 .w-16 {
   width: 4rem;
 }
-.w-12 {
-  width: 3rem;
+.w-10 {
+  width: 2.5rem;
 }
 .w-full {
   width: 100%;
 }
-.w-10 {
-  width: 2.5rem;
-}
 .\!w-full {
   width: 100% !important;
 }
+.\!w-fit {
+  width: -webkit-fit-content !important;
+  width: -moz-fit-content !important;
+  width: fit-content !important;
+}
 .w-fit {
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -902,6 +904,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-auto {
+  width: auto;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -914,8 +919,8 @@ video {
 .w-40 {
   width: 10rem;
 }
-.w-auto {
-  width: auto;
+.w-12 {
+  width: 3rem;
 }
 .w-3\.5 {
   width: 0.875rem;
@@ -1158,18 +1163,9 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.\!rounded-none {
-  border-radius: 0px !important;
-}
-.rounded-none {
-  border-radius: 0px;
-}
 .rounded {
   border-radius: 0.25rem;
 }
-.rounded-sm {
-  border-radius: 0.125rem;
-}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1218,15 +1214,15 @@ video {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-l {
+  border-left-width: 1px;
+}
 .border-r {
   border-right-width: 1px;
 }
 .border-l-2 {
   border-left-width: 2px;
 }
-.border-l {
-  border-left-width: 1px;
-}
 .border-b-0 {
   border-bottom-width: 0px;
 }
@@ -1282,10 +1278,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
 }
-.bg-blue-jellyBean {
-  --tw-bg-opacity: 1;
-  background-color: rgba(39, 107, 158, var(--tw-bg-opacity));
-}
 .bg-blue-congress {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
@@ -1414,6 +1406,9 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
+.p-0 {
+  padding: 0px;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1442,6 +1437,18 @@ video {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.\!px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1466,18 +1473,10 @@ video {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
 .py-1\.5 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -1663,10 +1662,6 @@ video {
   --tw-text-opacity: 1 !important;
   color: rgba(20, 83, 45, var(--tw-text-opacity)) !important;
 }
-.text-blue-jellyBean {
-  --tw-text-opacity: 1;
-  color: rgba(39, 107, 158, var(--tw-text-opacity));
-}
 .text-white {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -1687,6 +1682,14 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
 }
+.text-orange-spicyCarrot {
+  --tw-text-opacity: 1;
+  color: rgba(211, 70, 0, var(--tw-text-opacity));
+}
+.text-blue-jellyBean {
+  --tw-text-opacity: 1;
+  color: rgba(39, 107, 158, var(--tw-text-opacity));
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
@@ -1695,10 +1698,6 @@ video {
   --tw-text-opacity: 1;
   color: rgba(0, 109, 193, var(--tw-text-opacity));
 }
-.text-orange-spicyCarrot {
-  --tw-text-opacity: 1;
-  color: rgba(211, 70, 0, var(--tw-text-opacity));
-}
 .text-opacity-50 {
   --tw-text-opacity: 0.5;
 }
@@ -1867,7 +1866,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1660924214352;
+  counter-reset: cnt1661863471171;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2250,7 +2249,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1660924214352 1;
+  counter-increment: cnt1661863471171 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2267,7 +2266,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1660924214352);
+  content: counter(cnt1661863471171);
 }
 /*! purgecss start ignore */
 :root,
@@ -2679,15 +2678,15 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.hover\:fill-blue-jellyBean:hover {
-  fill: #006dc1;
-}
 .hover\:fill-white:hover {
   fill: #ffffff;
 }
 .hover\:fill-orange-spicyCarrot:hover {
   fill: #d34600;
 }
+.hover\:fill-blue-jellyBean:hover {
+  fill: #006dc1;
+}
 .hover\:text-toplineColor:hover {
   color: #006dc1;
   color: var(--color-topline);
@@ -2823,10 +2822,6 @@ video {
     margin-right: 0px !important;
   }
 
-  .md\:\!mr-2 {
-    margin-right: 0.5rem !important;
-  }
-
   .md\:\!mb-2 {
     margin-bottom: 0.5rem !important;
   }
@@ -2835,6 +2830,10 @@ video {
     margin-right: 0.5rem;
   }
 
+  .md\:\!mr-2 {
+    margin-right: 0.5rem !important;
+  }
+
   .md\:mt-0 {
     margin-top: 0px;
   }
@@ -2861,6 +2860,10 @@ video {
     display: none;
   }
 
+  .md\:h-auto {
+    height: auto;
+  }
+
   .md\:h-header-md {
     height: 5.5625rem;
   }
@@ -2873,10 +2876,6 @@ video {
     height: 1.75rem;
   }
 
-  .md\:h-auto {
-    height: auto;
-  }
-
   .md\:h-full {
     height: 100%;
   }
@@ -2974,10 +2973,6 @@ video {
     overflow: visible;
   }
 
-  .md\:\!rounded {
-    border-radius: 0.25rem !important;
-  }
-
   .md\:rounded-none {
     border-radius: 0px;
   }

package/dist/assets/js/views/components/mediaplayer/ardPlayerLoader.subfeature.js

@@ -0,0 +1,132 @@
+import { fireEvent, hr$, listen, loadScript } from 'hrQuery'
+import TrackingCookie from 'components/externalService/trackingCookieDs.subfeature'
+
+const ArdPlayerLoader = function (options, rootElement) {
+    'use strict'
+
+    const skinPath = options.cssUrl,
+        ardplayerUrl = options.jsUrl,
+        smarttagUrl = options.atiSmarttagUrl,
+        playerId = options.playerId,
+        trackingCookie = new TrackingCookie()
+    let mediaCollection = options.mediaCollection,
+        playerConfig = options.playerConfig,
+        player
+
+    const setupPlayer = function () {
+        if (
+            undefined != playerConfig.pluginData['trackingAti@all'] &&
+            playerConfig.pluginData['trackingAti@all'].isEnabled
+        ) {
+            playerConfig.pluginData['trackingAti@all'].config.cookieSecure =
+                'https:' === document.location.protocol
+        }
+        loadArdPlayerScript()
+        fetchPlayerStyle(skinPath).then(createPlayer())
+    }
+
+    const loadArdPlayerScript = function () {
+        loadScript('js-ardplayerHr', ardplayerUrl)
+    }
+
+    const fetchPlayerStyle = function (url, id) {
+        return new Promise(function (resolve, reject) {
+            if (document.getElementById(id)) {
+                resolve('Style wurde bereits geladen')
+                console.log('style was already loaded before')
+            } else {
+                const link = document.createElement('link')
+                link.type = 'text/css'
+                link.rel = 'stylesheet'
+                link.id = id
+                link.onload = function () {
+                    resolve()
+                }
+                link.href = url
+
+                const headScript = document.querySelector('script')
+                headScript.parentNode.insertBefore(link, headScript)
+                resolve('Style wurde neu geladen')
+            }
+        })
+    }
+
+    const createPlayer = function () {
+        if (
+            trackingCookie.isTrackingAccepted('ati') &&
+            playerConfig.pluginData['trackingAti@all'].isEnabled
+        ) {
+            loadScript('js-smarttagProd', smarttagUrl)
+        } else {
+            playerConfig.pluginData['trackingAti@all'].isEnabled = false
+        }
+        if (!trackingCookie.isTrackingAccepted('agf')) {
+            playerConfig.pluginData['trackingAgf@all'].isEnabled = false
+        }
+        whenAvailable('ardplayer', function () {
+            player = new ardplayer.Player(playerId, playerConfig, mediaCollection)
+            bindPlayerEvents()
+        })
+    }
+
+    const whenAvailable = function (name, callback) {
+        const interval = 100 // ms
+        const intervalId = window.setInterval(function () {
+            if (typeof ardplayer != 'undefined') {
+                window.clearInterval(intervalId)
+                callback(window[name])
+            }
+        }, interval)
+    }
+
+    const bindPlayerEvents = function () {
+        player.$.on(ardplayer.Player.EVENT_PLAY_STREAM, function (event) {
+            const geotag = hr$('.js-geotag', rootElement)[0]
+            if (typeof geotag != 'undefined') {
+                geotag.classList.add('hide')
+            }
+
+            fireEvent('hr:global:stopOtherAVs', 'ardplayer', true)
+        })
+
+        player.$.on(ardplayer.Player.EVENT_ERROR, function (event) {
+            if (undefined !== videoKey) {
+                fireEvent('hr:global:ardPlayerError', { key: videoKey }, true)
+            }
+        })
+
+        listen('hr:global:stopOtherAVs', function (event) {
+            if (event.detail != 'ardplayer') {
+                player.pause()
+            }
+        })
+
+        listen('player_closed', function (event) {
+            player.stop()
+        })
+
+        listen('player_start', function (event) {
+            if (player) {
+                if (undefined != mediaCollection.live) {
+                    player.seekToLive()
+                }
+                player.play()
+            }
+        })
+    }
+
+    if (
+        trackingCookie.isTrackingAccepted('agf') &&
+        window.gfkConnector &&
+        playerConfig.pluginData['trackingAgf@all']
+    ) {
+        gfkConnector.init(function (gfkLinkID) {
+            playerConfig.pluginData['trackingAgf@all'].clipData.nol_c20 = 'p20,' + gfkLinkID
+            setupPlayer()
+        })
+    } else {
+        setupPlayer()
+    }
+}
+
+export default ArdPlayerLoader

package/dist/assets/js/views/components/mediaplayer/mediaplayerLoader.feature.js

@@ -0,0 +1,32 @@
+import { hr$, listenOnce, listen } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+import ArdPlayerLoader from 'components/mediaplayer/ardPlayerLoader.subfeature'
+
+const MediaplayerLoader = function (context) {
+    'use strict'
+
+    const { options } = context,
+        { element: rootElement } = context,
+        isAutoplay = options.isAutoplay,
+        teaserSize = options.teaserSize,
+        mediaplayerButton = hr$('.js-mediaplayer__button', rootElement)[0]
+
+    const removeVideoHover = function () {
+        rootElement.parentNode.parentNode.classList.remove('-imageHover')
+        rootElement.parentNode.parentNode.parentNode.classList.remove('-imageHover')
+    }
+
+    const loadArdPlayerLoader = function () {
+        new ArdPlayerLoader(options)
+        removeVideoHover()
+        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+    }
+
+    if (isAutoplay) {
+        console.log('isAutoplay')
+        listenOnce('click', loadArdPlayerLoader, mediaplayerButton)
+    } else {
+        loadArdPlayerLoader()
+    }
+}
+export default MediaplayerLoader

package/dist/views/components/base/load_dynamic.hbs

@@ -1,4 +1,7 @@
 {{#switch _templatePath}}
+    {{#case "components/teaser/content_nav/teaser_content_nav"}}
+        {{> components/teaser/content_nav/teaser_content_nav}}
+    {{/case}}
     {{#case "components/site_header/service_navigation/service_navigation_item"}}
         {{> components/site_header/service_navigation/service_navigation_item}}
     {{/case}}

package/dist/views/components/content_nav/content_nav.hbs

@@ -1,10 +1,14 @@
-{{#with this.contentNav}}
+{{#with this.contentNav}} 
     {{#if this.isList}}
         <nav class="c-content-nav {{../_modifier}} ">
             {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
         </nav>
-    {{else}}
-        {{#>components/base/menu/dropdown
+    {{else if this.isFlow}}
+        <nav class="c-content-nav {{../_modifier}} ">
+            {{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
+        </nav>
+    {{else}} 
+        {{#>components/content_nav/dropdown
                      _componentClass="c-content-nav"
                      _teasersize=../_teasersize
                      _iconOpen="arrow-down"
@@ -14,18 +18,19 @@
         }} 
             <div x-on:click.outside ="open = false;" class="flex flex-wrap {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
                 {{#if this.isAutosuggest}}
-                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'>
-                
+                    data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
+                {{/if}}
+                >
+                {{#if this.isAutosuggest}}
                     <div class="flex w-full h-10 my-2 c-content-nav__autosuggest border-blue-congress align-center">
                         <input x-ref="autosuggestInput" class="w-full pl-4 focus:outline-none js-autosuggest-input" type="text"
                                 placeholder="Eintrag filtern"/>
                     </div>
                 {{/if}}
-
                 {{> components/content_nav/content_nav_list  _teasersize=_teasersize}}
 
             </div>
-        {{/components/base/menu/dropdown}}
+        {{/components/content_nav/dropdown}}
 
-    {{/if}}
+    {{/if}}   
 {{/with}}

package/dist/views/components/content_nav/content_nav_item.hbs

@@ -1,15 +1,18 @@
-<li :class="{{_isdropdown}} ? '!w-full md:!w-full mb-2 md:mb-0 md:!mr-0 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 !rounded-none ' 
-            : {{_ismixed}} && {{_teasersize}} >= 66 ? '!w-full md:!w-fit md:!mr-2 !mb-0 md:!mb-2 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 rounded-none md:!border md:!rounded' 
-            : {{_ismixed}} && {{_teasersize}} <= 50 ? '!w-full border-b !mb-0 last:border-b-0'
-            : {{_islist}} ? 'border rounded mb-2 ' 
+<li :class="{{_isdropdown}} ? '!w-full md:!w-full md:mb-0 md:!mr-0 border-l-0 border-r-0 border-t-0 border-b last:border-b-0' 
+            : {{_ismixed}} && {{_teasersize}} >= 66 ? '!w-full md:!w-fit !mb-0 md:!mb-2 md:mr-2 border-l-0 border-r-0 border-t-0 border-b last:border-b-0 md:!border' 
+            : {{_ismixed}} && {{_teasersize}} <= 50 ? '!w-full !mb-0 border-b last:border-b-0'
+            : {{_islist}} && {{_teasersize}} == 100 ? 'border mb-2 md:!mr-2 '
+            : {{_islist}} && {{_teasersize}} >= 66 ? 'border mb-2 !mr-2 '
+            : {{_islist}} && {{_teasersize}} <= 50 ? 'border mb-2 md:!mr-2'
+            : {{_isflow}} ? '!w-fit !mr-2 border mb-2'
             : '' " 
 
-class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-fit md:mr-2","w-fit mb-2 md:mr-2","w-full mb-2","w-full mb-2","w-full mb-2"]'}} overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
+class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-fit","w-fit","w-full","w-full","w-full"]'}} overflow-hidden text-base font-copy list-none border-blue-congress fill-congress hover:fill-white text-blue-congress hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
      {{#>components/base/link.hbs 
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
-        _css="flex items-center py-2 px-4  h-8 bg-white hover:bg-blue-congress rounded-sm whitespace-nowrap overflow-hidden" 
+        _css="flex items-center py-2 px-4 h-8 bg-white hover:bg-blue-congress whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
      }}
@@ -25,4 +28,4 @@ class="{{inline-switch _teasersize '["100","66","50","33","25"]' '["w-full md:w-
         {{/if}}
 
     {{/components/base/link.hbs}} 
-</li>
+</li>

package/dist/views/components/content_nav/content_nav_list.hbs

@@ -1,6 +1,5 @@
-<ul 
-    :class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)]' : ''"  
-    class="flex flex-wrap w-full m-0 last:border-b-0">
+<ul :class="{{this.isMixed}} && {{_teasersize}} < 66 || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}} ? 'shadow-[0_13px_27px_-2px_rgba(50,50,93,0.25)] !px-0 ' : ''" 
+    class="flex flex-wrap w-full px-2 m-0 last:border-b-0">
     
     {{~#each this.contentNavEntries~}}
           
@@ -20,8 +19,9 @@
             {{/if}}
         {{else}}
             
-            {{> components/content_nav/content_nav_item  _teasersize=../_teasersize _isdropdown=../isDropdown _ismixed=../isMixed _islist=../isList}}
+            {{> components/content_nav/content_nav_item  _teasersize=../_teasersize _isdropdown=../isDropdown _ismixed=../isMixed _islist=../isList _isflow=../isFlow}}
  
         {{~/if~}}
     {{~/each~}}
 </ul>
+

package/dist/views/components/{base/menu → content_nav}/dropdown.hbs

@@ -1,13 +1,14 @@
-<nav x-data="contentNavigationHandler()" 
-    x-init="init()"
-    class="w-full {{_componentClass}} {{_modifier}} " 
+<nav  
+    class="w-full px-2 {{_componentClass}} {{_modifier}} " 
     id="dropdown--{{nextRandom}}"
     tabindex="0"
     role="navigation"
     aria-labelledby="dropdown__label--{{getRandom}}">
+
     <span id="o-dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
+
     <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
-        class="flex w-full h-8 overflow-hidden bg-white border rounded border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
+        class="flex w-full h-8 overflow-hidden bg-white border border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
         
         <span class="text-base p-2 self-center w-full {{_componentClass}}__button-text">
                 {{_buttonText}}
@@ -22,8 +23,10 @@
             </span>
         </div>
 
-    </div>        
-    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="md:relative md:left-0 md:h-auto md:overflow-visible">
+    </div>    
+
+    <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="p-0 m-0 md:relative md:left-0 md:h-auto md:overflow-visible">
        {{> @partial-block }}
     </div>
+    
 </nav>