hr-design-system-handlebars 0.56.9 → 0.56.12

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v0.56.12 (Tue Sep 06 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1689 content navi next steps [#316](https://github.com/mumprod/hr-design-system-handlebars/pull/316) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.56.11 (Mon Sep 05 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1656 [#300](https://github.com/mumprod/hr-design-system-handlebars/pull/300) (zouhair1 [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (zouhair1)
+
+---
+
+# v0.56.10 (Fri Sep 02 2022)
+
+#### 🐛 Bug Fix
+
+- DPE-1689 : new JSON Key 'isListOrFlow' and some design tweaks [#315](https://github.com/mumprod/hr-design-system-handlebars/pull/315) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.56.9 (Fri Sep 02 2022)
 
 #### 🐛 Bug Fix

package/build/helpers/ifCond.js

@@ -0,0 +1,28 @@
+const handlebars = require("handlebars");
+module.exports = function (v1, operator, v2, options) {
+  var options = arguments[3];
+  switch (operator) {
+    case '==':
+        return (v1 == v2) ? options.fn(this) : options.inverse(this);
+    case '===':
+        return (v1 === v2) ? options.fn(this) : options.inverse(this);
+    case '!=':
+        return (v1 != v2) ? options.fn(this) : options.inverse(this);
+    case '!==':
+        return (v1 !== v2) ? options.fn(this) : options.inverse(this);
+    case '<':
+        return (v1 < v2) ? options.fn(this) : options.inverse(this);
+    case '<=':
+        return (v1 <= v2) ? options.fn(this) : options.inverse(this);
+    case '>':
+        return (v1 > v2) ? options.fn(this) : options.inverse(this);
+    case '>=':
+        return (v1 >= v2) ? options.fn(this) : options.inverse(this);
+    case '&&':
+        return (v1 && v2) ? options.fn(this) : options.inverse(this);
+    case '||':
+        return (v1 || v2) ? options.fn(this) : options.inverse(this);
+    default:
+        return options.inverse(this);
+}
+};

package/dist/assets/index.css

@@ -434,7 +434,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
+.btn--secondary, .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -636,12 +636,12 @@ video {
 .top-full {
   top: 100%;
 }
-.z-10000 {
-  z-index: 10000;
-}
 .z-10002 {
   z-index: 10002;
 }
+.z-10000 {
+  z-index: 10000;
+}
 .z-10001 {
   z-index: 10001;
 }
@@ -717,6 +717,10 @@ video {
   margin-left: 1px;
   margin-right: 1px;
 }
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 .mx-1\.5 {
   margin-left: 0.375rem;
   margin-right: 0.375rem;
@@ -737,12 +741,12 @@ video {
 .mt-0 {
   margin-top: 0px;
 }
-.ml-2 {
-  margin-left: 0.5rem;
-}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
 .-mt-2 {
   margin-top: -0.5rem;
 }
@@ -837,15 +841,15 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-full {
+  height: 100%;
+}
 .h-4 {
   height: 1rem;
 }
 .h-auto {
   height: auto;
 }
-.h-full {
-  height: 100%;
-}
 .h-0\.5 {
   height: 0.125rem;
 }
@@ -879,6 +883,9 @@ video {
 .h-2 {
   height: 0.5rem;
 }
+.h-24 {
+  height: 6rem;
+}
 .max-h-0 {
   max-height: 0px;
 }
@@ -894,12 +901,12 @@ video {
 .w-full {
   width: 100%;
 }
-.w-4 {
-  width: 1rem;
-}
 .w-auto {
   width: auto;
 }
+.w-4 {
+  width: 1rem;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -1177,6 +1184,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1203,6 +1213,12 @@ video {
 .rounded-br-3xl {
   border-bottom-right-radius: 1.5rem;
 }
+.rounded-tr-none {
+  border-top-right-radius: 0px;
+}
+.rounded-bl-none {
+  border-bottom-left-radius: 0px;
+}
 .border {
   border-width: 1px;
 }
@@ -1213,12 +1229,12 @@ video {
   border-left-width: 1px;
   border-right-width: 1px;
 }
-.border-b {
-  border-bottom-width: 1px;
-}
 .border-l {
   border-left-width: 1px;
 }
+.border-b {
+  border-bottom-width: 1px;
+}
 .border-l-0 {
   border-left-width: 0px;
 }
@@ -1296,6 +1312,10 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-grey-light {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 248, 248, var(--tw-bg-opacity));
+}
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
@@ -1428,6 +1448,9 @@ video {
 .p-0 {
   padding: 0px;
 }
+.p-8 {
+  padding: 2rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1460,14 +1483,14 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.\!px-0 {
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.\!px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1512,6 +1535,10 @@ video {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
 .py-px {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -1684,6 +1711,10 @@ video {
   --tw-text-opacity: 1 !important;
   color: rgba(20, 83, 45, var(--tw-text-opacity)) !important;
 }
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgba(250, 204, 21, var(--tw-text-opacity));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -1700,6 +1731,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(29, 78, 216, var(--tw-text-opacity));
 }
+.text-grey-dark {
+  --tw-text-opacity: 1;
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
+}
 .text-blue-congress {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, var(--tw-text-opacity));
@@ -1777,15 +1812,6 @@ video {
 .opacity-80 {
   opacity: 0.8;
 }
-.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
-  --tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
-  --tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
-  -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
-          box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
-  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
-          box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
-}
 .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
   --tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
   --tw-shadow-colored: 1px 4px 5px 0px var(--tw-shadow-color);
@@ -1795,6 +1821,15 @@ video {
   -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
           box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
+.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
+  --tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
+  --tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
+  -webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+          box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
+}
 .shadow-inner {
   --tw-shadow: inset 0 0px 5px 0 rgba(0, 0, 0, 0.25);
   --tw-shadow-colored: inset 0 0px 5px 0 var(--tw-shadow-color);
@@ -1897,7 +1932,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1662109528702;
+  counter-reset: cnt1662474004567;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2280,7 +2315,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1662109528702 1;
+  counter-increment: cnt1662474004567 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2297,7 +2332,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1662109528702);
+  content: counter(cnt1662474004567);
 }
 /*! purgecss start ignore */
 :root,
@@ -2665,25 +2700,25 @@ video {
     right: 0;
     bottom: 0;
 }
-.placeholder\:text-gray-800::-webkit-input-placeholder {
+.placeholder\:text-grey-dark::-webkit-input-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800::-moz-placeholder {
+.placeholder\:text-grey-dark::-moz-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800:-ms-input-placeholder {
+.placeholder\:text-grey-dark:-ms-input-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800::-ms-input-placeholder {
+.placeholder\:text-grey-dark::-ms-input-placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
-.placeholder\:text-gray-800::placeholder {
+.placeholder\:text-grey-dark::placeholder {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(112, 112, 112, var(--tw-text-opacity));
 }
 .first\:border-t:first-child {
   border-top-width: 1px;
@@ -3110,9 +3145,8 @@ video {
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   }
 
-  .md\:\!px-0 {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
+  .md\:p-4 {
+    padding: 1rem;
   }
 
   .md\:px-0 {
@@ -3120,6 +3154,11 @@ video {
     padding-right: 0px;
   }
 
+  .md\:\!px-0 {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+
   .md\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;

package/dist/assets/js/views/base/autosuggest/autoSuggest.feature.js

@@ -60,7 +60,7 @@ const AutoSuggest = function (context) {
             ) {
                 hasMatch = true
                 words[i] =
-                    "<span style='color:#ff9000' >" +
+                    "<span class='text-yellow-400' style='' >" +
                     words[i].slice(0, value.length) +
                     '</span>' +
                     words[i].slice(value.length)

package/dist/views/base/autosuggest/autoSuggest.feature.js

@@ -60,7 +60,7 @@ const AutoSuggest = function (context) {
             ) {
                 hasMatch = true
                 words[i] =
-                    "<span style='color:#ff9000' >" +
+                    "<span class='text-yellow-400' style='' >" +
                     words[i].slice(0, value.length) +
                     '</span>' +
                     words[i].slice(value.length)

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

@@ -1,23 +1,15 @@
 {{#with this.contentNav}} 
-    {{#if this.isList}} 
-        <nav class="c-content-nav"> 
+    {{#if this.isListOrFlow}}
+        <nav class="w-full c-content-nav">
             {{> components/content_nav/content_nav_container 
                 _teasersize=../_teasersize 
                 _maindivclass="flex flex-wrap mt-2 md:mt-0" 
-                _inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"
-            }}
-        </nav>
-    {{else if this.isFlow}}
-        <nav class="c-content-nav">
-            {{> components/content_nav/content_nav_container 
-                _teasersize=../_teasersize 
-                _maindivclass="flex flex-wrap mt-2 md:mt-0" 
-                _inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center "
+                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"
             }}    
         </nav>
-    {{else}}  
-        {{#>components/content_nav/dropdown
-                     _componentClass="c-content-nav"
+    {{else}}
+        {{#>components/content_nav/content_nav_dropdown
+                     _componentClass="c-content-nav w-full"
                      _teasersize=../_teasersize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"
@@ -27,8 +19,8 @@
             {{> components/content_nav/content_nav_container 
                 _teasersize=_teasersize 
                 _maindivclass="flex flex-wrap mt-0" 
-                _inputcontainerclass="flex w-full h-10 mx-0 border-blue-congress align-center "
+                _inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "
             }}
-        {{/components/content_nav/dropdown}}
+        {{/components/content_nav/content_nav_dropdown}}
     {{/if}}
 {{/with}} 

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

@@ -1,14 +1,18 @@
-<div x-on:click.outside ="$store.contentNavDropdownIsOpen = false;" class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
+<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
+    @click.outside ="$store.contentNavDropdownIsOpen = false;"
     {{#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"}'
     {{/if}}
-    >
+>
     {{#if this.isAutosuggest}}
         <div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">
-            <input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
-                    placeholder="Eintrag filtern"/>
+            <input x-ref="autosuggestInput" 
+                class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                type="text"
+                placeholder="Eintrag filtern"/>
         </div>
     {{/if}}
 
     {{> components/content_nav/content_nav_list _teasersize=_teasersize }}
+    
 </div>

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

@@ -9,22 +9,20 @@
 
     <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" 
         :class="$store.contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
-        class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"  >
-        
-        <span class="self-center w-full p-2 text-base">
-                {{_buttonText}}
-        </span>
+        class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"
+    >
+        <span class="self-center w-full p-2 text-base">{{_buttonText}}</span>
         <div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">
             <span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen" 
                 :class="$store.contentNavDropdownIsOpen ? 'hidden' : ''"  
-                class="flex self-center">
-                
-                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
-                
+                class="flex self-center"
+            >
+                {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}    
             </span>
             <span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen; $dispatch('resetinput')" 
                 :class="$store.contentNavDropdownIsOpen ? '' : 'hidden'" 
-                class="flex self-center">
+                class="flex self-center"
+            >
                 {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
             </span>
         </div>

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

@@ -1,15 +1,16 @@
 <li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" 
-class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
-     {{#>components/base/link.hbs 
+    class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item"
+>
+    {{#>components/base/link.hbs 
         _doNavigationTracking="true" 
         _clickLabelType="Contentnavigation" 
         _clickLabelPrefix1=this.title 
         _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden" 
         _isSelected=this.isSelected
         _selectedCssClass="is-selected"
-     }}
+    }}
         
-        <span class="flex text-base grow font-copy js-title">{{this.title}}</span>
+        <span class="block text-base grow font-copy js-title truncate ... ">{{this.title}}</span>
 
         {{#if this.link.hasIcon}}
             {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}

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

@@ -1,26 +1,32 @@
-<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen === true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''" 
-    class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0">
+<ul :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && $store.contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''"
+    class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0"> 
     
     {{~#each this.contentNavEntries~}}
           
         {{~#if this.isGroup~}}
         
-            {{#if ../isDropdown}}            
-                
+            {{#if ../isDropdown}}               
                 <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">
                     <div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>
-                    <ul class="c-content-nav__group-list !px-0 mt-0 ">
+                    <ul class="c-content-nav__group-list !px-0 mt-0">
                         {{~#each this.navigationGroup~}}
-                            {{> components/content_nav/content_nav_item _teasersize=../../_teasersize _isdropdown=../../isDropdown _ismixed=../../isMixed _islist=../../isList _isflow=../../isFlow}}
+                            {{> components/content_nav/content_nav_item 
+                                _teasersize=../../_teasersize 
+                                _isdropdown=../../isDropdown 
+                                _ismixed=../../isMixed 
+                                _islist=../../isList 
+                                _isflow=../../isFlow}}
                         {{~/each~}}
                     </ul>
-                </li>
-                
+                </li> 
             {{/if}}
-        {{else}}
-            
-            {{> components/content_nav/content_nav_item  _teasersize=../_teasersize _isdropdown=../isDropdown _ismixed=../isMixed _islist=../isList _isflow=../isFlow}}
- 
+        {{else}}           
+            {{> components/content_nav/content_nav_item  
+                _teasersize=../_teasersize 
+                _isdropdown=../isDropdown 
+                _ismixed=../isMixed 
+                _islist=../isList 
+                _isflow=../isFlow}}
         {{~/if~}}
     {{~/each~}}
 </ul>

package/dist/views/components/site_header/header_alpine.js

@@ -380,36 +380,52 @@ document.addEventListener('alpine:init', () => {
             }
 
             return false 
-        }, 
-
+        },
         chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow){
             let classes = []
             
             switch (teasersize) {
                 case 100:
                     classes.push('w-full','md:w-fit')
-                    isList ? classes.push('border','mb-2','md:!mr-2','hover:no-underline') : isMixed ? classes.push('!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','md:border-blue-congress','border-gray-400','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress','md:hover:no-underline','md:hover:text-white','md:hover:!bg-blue-congress','md:hover:!fill-white') : isDropdown ? classes.push('!w-full','ml-0','md:!w-full','md:mb-0','md:!mr-0','border-gray-400','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') : ''
+                    isList ? classes.push('border','mb-2','md:!mr-2','hover:no-underline') 
+                    : isMixed ? classes.push('!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','md:border-blue-congress','border-gray-400','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress','md:hover:no-underline','md:hover:text-white','md:hover:!bg-blue-congress','md:hover:!fill-white') 
+                    : isDropdown ? classes.push('!w-full','ml-0','md:!w-full','md:mb-0','md:!mr-0','border-gray-400','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
                     break;
                 case 66:
                     classes.push('w-fit')
-                    isList == true ? classes.push('border','mb-2','mr-2','md:!mr-2','hover:no-underline') : isMixed ? classes.push('!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','hover:text-blue-congress','hover:!fill-congress','hover:!bg-white','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:no-underline','md:hover:!fill-white') : isDropdown ? classes.push('!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','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') : ''
-                    console.log(classes)
+                    isList == true ? classes.push('border','mb-2','mr-2','md:!mr-2','hover:no-underline') 
+                    : isMixed ? classes.push('!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','hover:text-blue-congress','hover:!fill-congress','hover:!bg-white','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:no-underline','md:hover:!fill-white') 
+                    : isDropdown ? classes.push('!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','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
                     break;
                 case 50:
                     classes.push('w-full')
-                    isList ? classes.push('border','mb-2', 'md:!mr-2','hover:no-underline') : isMixed ? classes.push('!w-full','border','md:mb-2', 'md:!mr-2','last:mb-0','border-gray-400','border-l-0','border-r-0','border-t-0','md:border','md:border-blue-congress','hover:underline','hover:!bg-white','hover:text-blue-congress','hover:fill-congress','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:fill-white','md:hover:no-underline') : isDropdown ? classes.push('!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','border-gray-400','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') : ''
+                    isList ? classes.push('border','mb-2','hover:no-underline') 
+                    : isMixed ? classes.push('!w-full','border','md:mb-2','last:mb-0','border-gray-400','border-l-0','border-r-0','border-t-0','md:border','md:border-blue-congress','hover:underline','hover:!bg-white','hover:text-blue-congress','hover:fill-congress','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:fill-white','md:hover:no-underline') 
+                    : isDropdown ? classes.push('!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','border-gray-400','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
                     break;
                 case 33:
                     classes.push('w-full')
-                    isList ? classes.push('border','mb-2', 'md:!mr-2','hover:no-underline') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:text-blue-congress','hover:!fill-congress') : isDropdown ? classes.push('!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','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') : ''
+                    isList ? classes.push('border','mb-2','hover:no-underline') 
+                    : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:text-blue-congress','hover:!fill-congress') 
+                    : isDropdown ? classes.push('!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','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
                     break;
                 case 25:
                     classes.push('w-full')
-                    isList ? classes.push('border','mb-2', 'md:!mr-2','hover:no-underline') : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:!text-blue-congress','hover:!fill-congress') : isDropdown ? classes.push('!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','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') : ''
+                    isList ? classes.push('border','mb-2','hover:no-underline') 
+                    : isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:!text-blue-congress','hover:!fill-congress') 
+                    : isDropdown ? classes.push('!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','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress') 
+                    : isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline') 
+                    : ''
                     break;
-
             }
-
             for (let i = 0; i < classes.length; i++) {
                 this.$el.classList.add(classes[i])
             }

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,5 +1,5 @@
 
-                {{#>components/base/link link=this.logicItem.includeModel.link css="group" doTracking=(if this.logicItem.includeModel.doTracking 'true') clickLabelPrefix1="clusterTeaserLink" clickLabelPrefix2="Link" }} 
+                {{#>components/base/link link=this.logicItem.includeModel.link _css="group" _doTracking=(if this.logicItem.includeModel.doTracking 'true') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} 
                     {{> components/teaser/components/teaser_heading
                         _headlineTag=this.logicItem.includeModel.headlineTag 
                         _label=this.logicItem.includeModel.label