hr-design-system-handlebars 0.56.8 → 0.56.11

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# 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
+
+- Feature/dpe 1567 [#314](https://github.com/mumprod/hr-design-system-handlebars/pull/314) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.56.8 (Thu Sep 01 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

@@ -1296,6 +1296,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));
@@ -1684,6 +1688,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 +1708,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));
@@ -1897,7 +1909,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1662058116451;
+  counter-reset: cnt1662392589209;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2280,7 +2292,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1662058116451 1;
+  counter-increment: cnt1662392589209 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2297,7 +2309,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1662058116451);
+  content: counter(cnt1662392589209);
 }
 /*! purgecss start ignore */
 :root,
@@ -2665,25 +2677,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;

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/assets/js/views/generic/hrQuery.subfeature.js

@@ -1,7 +1,7 @@
 import Initializer from 'initializer'
 import loadFeature from 'loadFeature'
 
-const hr$ = (selector, element) => {
+const hr$ = function (selector, element) {
     // if element set, use it
     // if not use document as default
     const rootElement = element || document
@@ -34,24 +34,19 @@ const hr$ = (selector, element) => {
     return rootElement.querySelectorAll(selector)
 }
 
-const stripTags = text => {
-    if (text) {
-        return text.replace(/(<([^>]+)>)/gi, '')
-    }
-    return false
-}
+const stripTags = (text) => (text ? text.replace(/(<([^>]+)>)/gi, '') : false)
 
 const getViewportWidth = () =>
     Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 
-const isString = value => Object.prototype.toString.call(value) === '[object String]'
+const isString = (value) => Object.prototype.toString.call(value) === '[object String]'
 
-const isElementInViewport = el => {
+const isElementInViewport = (el) => {
     const rect = el.getBoundingClientRect()
     return rect.top <= (document.documentElement || document.body).clientHeight
 }
 
-const getClosestParentWithTag = (tagName, node) => {
+const getClosestParentWithTag = function (tagName, node) {
     while (node !== null && node.tagName !== 'BODY') {
         if (node.tagName && node.tagName.toLowerCase() === tagName) {
             return node
@@ -61,7 +56,7 @@ const getClosestParentWithTag = (tagName, node) => {
     return false
 }
 
-const getNodeWithClassInPath = (className, startNode) => {
+const getNodeWithClassInPath = function (className, startNode) {
     let node = startNode
 
     while (node && node !== document) {
@@ -73,7 +68,7 @@ const getNodeWithClassInPath = (className, startNode) => {
     return false
 }
 
-const isDescendant = (parent, child) => {
+const isDescendant = function (parent, child) {
     let node = child.parentNode
     while (node !== null) {
         if (node === parent) {
@@ -85,9 +80,9 @@ const isDescendant = (parent, child) => {
 }
 
 /* wartet x ms seit dem letzen aufruf bis es ausgeführt wird */
-const debounce = (fn, delay) => {
+const debounce = function (fn, delay) {
     let timer = null
-    return (...args) => {
+    return function (...args) {
         const context = this
         clearTimeout(timer)
         timer = setTimeout(() => {
@@ -96,11 +91,11 @@ const debounce = (fn, delay) => {
     }
 }
 /* feuert all x ms */
-const throttle = (fn, threshhold, scope) => {
+const throttle = function (fn, threshhold, scope) {
     threshhold = threshhold || 250
     let last
     let deferTimer
-    return (...args) => {
+    return function (...args) {
         const context = scope || this
 
         const now = +new Date()
@@ -128,10 +123,10 @@ const throttle = (fn, threshhold, scope) => {
     canOnlyFireOnce(); // nada
  *
  */
-const once = (fn, context) => {
+const once = function (fn, context) {
     let result
 
-    return (...args) => {
+    return function (...args) {
         if (fn) {
             result = fn.apply(context || this, args)
             fn = null
@@ -141,16 +136,25 @@ const once = (fn, context) => {
     }
 }
 
-const listen = (eventName, fn, documentNode) => {
+const listen = function (eventName, fn, documentNode, forceActive = false) {
     documentNode = documentNode === undefined ? document : documentNode
 
+    // Use passive listeners to improve scrolling performance
+    // See:
+    // https://web.dev/uses-passive-event-listeners/
+    // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+
+    const isTouchOrMouseEvent =
+        eventName === 'touchstart' || eventName === 'touchmove' || eventName === 'wheel'
+    const isPassive = Modernizr.passiveeventlisteners && !forceActive && isTouchOrMouseEvent
+
     if (window.attachEvent) {
         documentNode.attachEvent(eventName, fn)
     } else {
-        documentNode.addEventListener(eventName, fn)
+        documentNode.addEventListener(eventName, fn, isPassive ? { passive: true } : false)
     }
 }
-const unlisten = (eventName, fn, documentNode) => {
+const unlisten = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     if (window.attachEvent) {
@@ -159,7 +163,7 @@ const unlisten = (eventName, fn, documentNode) => {
         documentNode.removeEventListener(eventName, fn)
     }
 }
-const listenOnce = (eventName, fn, documentNode) => {
+const listenOnce = function (eventName, fn, documentNode) {
     documentNode = documentNode === undefined ? document : documentNode
 
     documentNode.addEventListener(eventName, fn, { once: true })
@@ -194,7 +198,7 @@ const setJSONCookie = (cookieName, cookieValue, cookieLifetime) => {
     setCookie(cookieName, JSON.stringify(cookieValue), cookieLifetime)
 }
 
-const setCookie = (cookieName, cookieValue, cookieLifetime) => {
+const setCookie = function (cookieName, cookieValue, cookieLifetime) {
     let expires
 
     const domain = getDomain()
@@ -211,7 +215,7 @@ const setCookie = (cookieName, cookieValue, cookieLifetime) => {
         cookieName + '=' + cookieValue + ';expires=' + expires + ';domain=' + domain + ';path=/;'
 }
 
-const getJSONCookie = cookieName => {
+const getJSONCookie = (cookieName) => {
     let cookie
 
     try {
@@ -221,12 +225,12 @@ const getJSONCookie = cookieName => {
     return cookie
 }
 
-const getCookie = cookieName => {
+const getCookie = (cookieName) => {
     let cookieString = RegExp('' + cookieName + '[^;]+').exec(document.cookie)
     return unescape(!!cookieString ? cookieString.toString().replace(/^[^=]+./, '') : '')
 }
 
-const deleteCookie = cookieName => {
+const deleteCookie = (cookieName) => {
     const domain = getDomain()
     document.cookie =
         cookieName + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=' + domain + ';path=/;'
@@ -235,17 +239,18 @@ const deleteCookie = cookieName => {
 const getDomain = () => {
     return window.location.hostname.substring(window.location.hostname.indexOf('.') + 1)
 }
-const requestTimeout = (fn, delay) => {
-    var requestAnimFrame = (function() {
+const requestTimeout = function (fn, delay) {
+    var requestAnimFrame = (function () {
             return (
                 window.requestAnimationFrame ||
-                function(callback, element) {
+                function (callback, element) {
                     window.setTimeout(callback, 1000 / 60)
                 }
             )
         })(),
         start = new Date().getTime(),
         handle = {}
+
     function loop() {
         var current = new Date().getTime(),
             delta = current - start
@@ -255,11 +260,12 @@ const requestTimeout = (fn, delay) => {
             handle.value = requestAnimFrame(loop)
         }
     }
+
     handle.value = requestAnimFrame(loop)
     return handle
 }
 
-const replaceAnimated = (
+const replaceAnimated = function (
     elem,
     data,
     rescan,
@@ -269,7 +275,7 @@ const replaceAnimated = (
     valueTo,
     easing,
     duration
-) => {
+) {
     const property = 'opacity'
     timeoutDelay = timeoutDelay || 800
     valueFrom = valueFrom || 0.2
@@ -283,7 +289,7 @@ const replaceAnimated = (
 
     elem.style[property] = valueFrom
 
-    requestTimeout(function() {
+    requestTimeout(function () {
         if (data) {
             elem.innerHTML = data
         }
@@ -300,33 +306,33 @@ const replaceAnimated = (
     }, timeoutDelay)
 }
 
-hr$.loadScript = function(id, scriptUrl, async, callback) {
-    if (document.getElementById(id)) return
+const getScrollY = () =>
+    window.pageYOffset !== undefined
+        ? window.pageYOffset
+        : (document.documentElement || document.body.parentNode || document.body).scrollTop
 
-    var firstScriptTagInPage = hr$('script')[0],
-        scriptTag = document.createElement('script')
+//Funktion um X & Y Offset eines Elements zu ermitteln
+const getElementOffset = function (el) {
+    let _x = 0
+    let _y = 0
+    _x = Math.round(el.getBoundingClientRect().left)
+    _y = Math.round(el.getBoundingClientRect().top)
 
-    scriptTag.id = id
-    scriptTag.src = scriptUrl
+    return { top: _y, left: _x }
+}
 
-    if (async) {
-        scriptTag.setAttribute('async', !!async)
-    }
+const reinitializeFeature = function (element) {
+    Initializer.run(element, loadFeature)
+}
 
-    if (callback) {
-        scriptTag.addEventListener(
-            'load',
-            function(e) {
-                callback(null, e)
-            },
-            false
-        )
+const removeScript = function (id) {
+    const element = document.getElementById(id)
+    if (element) {
+        element.parentNode.removeChild(element)
     }
-
-    firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
-const loadScript = (id, scriptUrl, async, callback) => {
+const loadScript = function (id, scriptUrl, async, callback) {
     if (document.getElementById(id)) return
 
     let firstScriptTagInPage = hr$('script')[0],
@@ -342,7 +348,7 @@ const loadScript = (id, scriptUrl, async, callback) => {
     if (callback) {
         scriptTag.addEventListener(
             'load',
-            function(e) {
+            function (e) {
                 callback(null, e)
             },
             false
@@ -352,7 +358,94 @@ const loadScript = (id, scriptUrl, async, callback) => {
     firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
+/*
+ * Fügt ein "style" bereich zum dokument hinzu
+ * und gibt eine referenz darauf zurück
+ * auf der man dann mit insertRule arbeiten kann
+ */
+const addStyle = function (css, mediaQuery) {
+    // Create the <style> tag
+    const style = document.createElement('style')
+
+    if (mediaQuery) {
+        style.setAttribute('media', mediaQuery)
+    }
+
+    // Add the <style> element to the page
+    if (style.styleSheet) {
+        style.styleSheet.cssText = css || ''
+    } else {
+        style.appendChild(document.createTextNode(css || ''))
+    }
+
+    document.head.appendChild(style)
+
+    return style.sheet
+}
+
+const simulateClickOn = function (elem) {
+    elem.dispatchEvent(
+        new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+        })
+    )
+}
+
+/*!
+ * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance
+ * modified gist.github.com/joelambert/1002116
+ * the fallback function requestAnimFrame is incorporated
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Object} fn The callback function
+ * @param {Int} delay The delay in milliseconds
+ * requestInterval(fn, delay);
+ */
+const requestInterval = function (fn, delay) {
+    const requestAnimFrame = (function () {
+            return (
+                window.requestAnimationFrame ||
+                function (callback, element) {
+                    window.setTimeout(callback, 1000 / 60)
+                }
+            )
+        })(),
+        handle = {}
+    let start = new Date().getTime()
+
+    function loop() {
+        handle.value = requestAnimFrame(loop)
+        const current = new Date().getTime(),
+            delta = current - start
+        if (delta >= delay) {
+            fn.call()
+            start = new Date().getTime()
+        }
+    }
+
+    handle.value = requestAnimFrame(loop)
+    return handle
+}
+
+/*!
+ * Behaves the same as clearInterval except uses cancelRequestAnimationFrame()
+ * where possible for better performance
+ * gist.github.com/joelambert/1002116
+ * gist.github.com/englishextra/873c8f78bfda7cafc905f48a963df07b
+ * jsfiddle.net/englishextra/sxrzktkz/
+ * @param {Int|Object} handle function handle, or function
+ * clearRequestInterval(handle);
+ */
+const clearRequestInterval = (handle) =>
+    window.cancelAnimationFrame && handle
+        ? window.cancelAnimationFrame(handle.value)
+        : window.clearInterval(handle)
+
 export {
+    addStyle,
     hr$,
     stripTags,
     getViewportWidth,
@@ -373,8 +466,15 @@ export {
     setJSONCookie,
     getJSONCookie,
     getCookie,
+    getScrollY,
+    getElementOffset,
     deleteCookie,
+    requestInterval,
+    clearRequestInterval,
     requestTimeout,
     replaceAnimated,
-    loadScript
+    loadScript,
+    removeScript,
+    reinitializeFeature,
+    simulateClickOn,
 }

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}}  
+    {{else}}
         {{#>components/content_nav/dropdown
-                     _componentClass="c-content-nav"
+                     _componentClass="c-content-nav w-full"
                      _teasersize=../_teasersize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"
@@ -27,7 +19,7 @@
             {{> 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}}
     {{/if}}

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/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,5 +1,5 @@
-<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~}}
           
@@ -9,7 +9,7 @@
                 
                 <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}}
                         {{~/each~}}