hr-design-system-handlebars 0.123.7 → 0.124.0

package/dist/assets/js/components/event/filtererDs.feature.js

@@ -0,0 +1,298 @@
+import { pi, uxAction } from 'base/tracking/atiHelper.subfeature'
+import { hr$, isString, listen, reinitializeFeature, simulateClickOn } from 'hrQuery'
+import $ from 'zepto-modules'
+
+require('zepto-modules/callbacks')
+require('zepto-modules/deferred')
+
+const Filterer = (context) => {
+    const { options } = context
+    const { element: rootElement } = context
+    const contentTargetClass = '.js-fr-content'
+    const errorTargetClass = 'js-fr-error-target'
+    const errorClass = 'js-fr-error'
+    const reloadTriggerClass = 'js-fr-reload-trigger'
+    const targetClass = 'js-fr-target'
+    const triggerClass = 'js-fr-trigger'
+    const triggerDomNodes = hr$(`.${triggerClass}`, rootElement)
+    let targetDomNodes = hr$(`.${targetClass}`, rootElement)
+    const errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement)
+    const errorDomNodes = hr$(`.${errorClass}`)
+    const contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
+
+    const init = function () {
+        for (let i = 0; i < triggerDomNodes.length; i++) {
+            triggerDomNodes[i].addEventListener('click', doSetSelectedFilter.bind(this))
+            triggerDomNodes[i].addEventListener('touch', doSetSelectedFilter.bind(this))
+        }
+
+        //die konfigration auf root ebene triggerd das verhalten beim starten
+        if (options && options.crit && options.strat) {
+            //finden des passenden triggers
+            for (i = 0; i < triggerDomNodes.length; i++) {
+                if (
+                    JSON.parse(triggerDomNodes[i].getAttribute('data-prop-filterer')).crit ===
+                    options.crit
+                ) {
+                    doSetSelectedFilter({ currentTarget: triggerDomNodes[i] }, false)
+                    return
+                }
+            }
+        }
+
+        if (
+            !rootElement.classList.contains('-excerpt') &&
+            !!(window.history && window.history.pushState)
+        ) {
+            listen('popstate', handlePopstate, window)
+            //initial state ersetzen so dass es ein rückkehrpunkt gibt
+            const selectedTrigger = hr$('.' + triggerClass + '.-selected', rootElement)
+            history.replaceState(
+                {
+                    sel: triggerClass,
+                    cache: false,
+                    crit:
+                        selectedTrigger.length > 0
+                            ? selectedTrigger[0].getAttribute('data-prop-crit')
+                            : triggerDomNodes[0].getAttribute('data-prop-crit'),
+                },
+                null,
+                window.location.href
+            )
+        }
+    }
+
+    const doSetSelectedFilter = function (e, forceReset) {
+        clearSelected()
+
+        if (!forceReset) {
+            e.currentTarget.classList.add('-selected')
+        }
+
+        //hacky weil e beim start auch kein Event sein kann
+        'preventDefault' in e && e.preventDefault()
+
+        doFilter(e.currentTarget, forceReset, true, true)
+    }
+
+    const clearSelected = function () {
+        let triggerDomNodes = hr$(`.${triggerClass}.-selected`, rootElement)
+
+        triggerDomNodes.forEach(function (triggerDomNode) {
+            triggerDomNode.classList.remove('-selected')
+        })
+    }
+
+    const doFilter = function (currentTarget, forceReset, push, countXTClick) {
+        let data = JSON.parse(currentTarget.getAttribute('data-prop-filterer')),
+            crit = currentTarget.getAttribute('data-prop-crit'),
+            time = new Date().getTime(),
+            reset = forceReset,
+            href = currentTarget.getAttribute('href'),
+            strat,
+            found = false
+
+        console.log('targets-length:' + targetDomNodes.length)
+
+        //falls kein array, string in array umheben
+        if (isString(data.strat)) {
+            strat = []
+            strat.push(data.strat)
+        } else {
+            strat = data.strat
+        }
+
+        for (let i = 0; i < strat.length; i++) {
+            if ('hobid' === strat[i]) {
+                if ($(currentTarget, rootElement).closest('.' + reloadTriggerClass).length > 0) {
+                    loadContent(currentTarget)
+                } else {
+                    stratHideOthersById(targetDomNodes, data.crit, reset)
+                    if (push && !rootElement.classList.contains('-excerpt')) {
+                        history.pushState(
+                            {
+                                sel: '.' + currentTarget + '.-selected',
+                                crit: data.crit,
+                            },
+                            null,
+                            href
+                        )
+                        uxAction('Eventkalender-Monat:: Tag geklickt', 1)
+                    } else {
+                        uxAction('Eventkalender:: Tag geklickt', 1)
+                    }
+                }
+            } else if ('hoswid' === strat[i]) {
+                if ($(currentTarget, rootElement).closest('.' + reloadTriggerClass).length > 0) {
+                    loadContent(currentTarget)
+                } else {
+                    stratHideOthersStartsWithId(targetDomNodes, data.crit, reset)
+                    if (push && !rootElement.classList.contains('-excerpt')) {
+                        history.pushState(
+                            {
+                                sel: '.' + currentTarget + '.-selected',
+                                crit: data.crit,
+                            },
+                            null,
+                            href
+                        )
+                        uxAction('Eventkalender-Monat:: Monat geklickt', 1)
+                    }
+                }
+            } else if ('cs' === strat[i]) {
+                clearSelected()
+            } else if ('initial' === strat[i]) {
+                initial()
+            }
+        }
+
+       /* if (countXTClick) {
+            pi(
+                xtpage +
+                    '&pchap=' +
+                    xt_chap +
+                    '&pid=' +
+                    xt_pageID +
+                    '&pidt=' +
+                    xt_pageDate +
+                    xt_multc
+            )
+        }*/
+
+        removeErrors()
+    }
+    const removeErrors = function () {
+        if (errorTargetDomNodes.length > 0) {
+            errorTargetDomNodes[0].classList.add('hidden')
+        }
+
+        if (errorDomNodes.length > 0) {
+            errorDomNodes[0].classList.add('hidden')
+        }
+    }
+    const loadContent = function (currentTarget) {
+        var url = createInlineUrl(currentTarget),
+            ts = new Date().getTime()
+
+        console.log('load content ' + url)
+
+        $.ajax({
+            type: 'GET',
+            dataType: 'html',
+            url: url,
+            timeout: 90 * 1000,
+            cache: true,
+            beforeSend: function () {
+                console.log('before load')
+                $(contentTargetClass, rootElement).addClass('-isLoading')
+            },
+        })
+            .done(function (data, status, xhr) {
+                var tsDelta = 500 - (new Date().getTime() - ts)
+
+                //mindesten 500ms anzeigen
+                setTimeout(
+                    function () {
+                        console.log('loaded')
+
+                        $(contentTargetClass, rootElement).append(data)
+
+                        targetDomNodes = hr$('.' + targetClass, rootElement)
+                        $(contentTargetClass, rootElement).removeClass('-isLoading')
+                        $(currentTarget, rootElement)
+                            .closest('.' + reloadTriggerClass)
+                            .removeClass(reloadTriggerClass)
+                        doFilter(currentTarget, false, true, false)
+                        reinitializeFeature(contentTargetDomNode)
+                    },
+                    tsDelta < 0 ? 0 : tsDelta
+                )
+            })
+            .fail(function (data, status, xhr) {
+                console.log('load error')
+                $(contentTargetClass, rootElement).addClass('-isLoading')
+            })
+    }
+    const createInlineUrl = function (element) {
+        var href = element.getAttribute('href'),
+            pos = href.indexOf('~') + 1
+
+        return href.substr(0, pos) + 'inline' + href.substr(pos)
+    }
+    const handlePopstate = function (event) {
+        var target
+        //nur handlen wenn es ein state gibt
+        if (event.state.sel) {
+            target = $(
+                '.' + triggerClass + "[data-prop-crit='" + event.state.crit + "']",
+                rootElement
+            )[0]
+            doFilter(target, false, false)
+            clearSelected()
+            target.classList.add('-selected')
+        }
+    }
+    const initial = function () {
+        simulateClickOn(hr$('.js-fr-initial', rootElement)[0])
+    }
+
+    const stratHideOthersById = function (targetDomNodes, crit, reset) {
+        var i = 0,
+            found = false
+
+        if (reset) {
+            for (i = 0; i < targetDomNodes.length; i++) {
+                targetDomNodes[i].classList.remove('hidden')
+            }
+            return
+        }
+
+        for (i = 0; i < targetDomNodes.length; i++) {
+            if (targetDomNodes[i].getAttribute('id') !== crit) {
+                targetDomNodes[i].classList.add('hidden')
+            } else {
+                targetDomNodes[i].classList.remove('hidden')
+
+                found = true
+            }
+        }
+
+        displayErrorTarget()
+
+        return found
+    }
+    const stratHideOthersStartsWithId = function (targetDomNodes, crit, reset) {
+        var i = 0,
+            found = false
+
+        if (reset) {
+            for (i = 0; i < targetDomNodes.length; i++) {
+                targetDomNodes[i].classList.remove('hidden')
+            }
+            return
+        }
+
+        for (i = 0; i < targetDomNodes.length; i++) {
+            if (targetDomNodes[i].getAttribute('id').indexOf(crit) !== 0) {
+                targetDomNodes[i].classList.add('hidden')
+            } else {
+                targetDomNodes[i].classList.remove('hidden')
+
+                found = true
+            }
+        }
+
+        displayErrorTarget()
+
+        return found
+    }
+    const displayErrorTarget = function () {
+        if (targetDomNodes.length >= 1) {
+            if (errorTargetDomNodes.length > 0) {
+                errorTargetDomNodes[0].classList.remove('hidden')
+            }
+        }
+    }
+    init()
+}
+export default Filterer

package/dist/assets/js/components/event/nativeScrollDs.feature.js

@@ -0,0 +1,110 @@
+import { clearRequestInterval, hr$, requestInterval } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+
+const NativeScroll = function (context) {
+    console.log('loaded feature ...')
+    const { options } = context,
+        { element: rootElement } = context,
+        isTeaser = options.isTeaser
+    let buttons,
+        scrollbar,
+        oneScrollbarItem,
+        hideScrollbar = true,
+        hasNativeSmoothScroll = false,
+        smoothScrollInterval
+    // Detect if the browser already supports native smooth scrolling (e.g., Firefox 36+ and Chrome 49+) and it is enabled:
+    const isNativeSmoothScrollEnabledOn = function () {
+        return 'scroll-behavior' in document.documentElement.style
+    }
+    const doScroll = function (e) {
+        let step = scrollbar.clientWidth - oneScrollbarItem.clientWidth * 1.5,
+            direction = e.currentTarget.classList.contains('-left') ? -1 : 1,
+            distance = direction * step
+            console.log("🚀 ~ file: nativeScroll.feature.js ~ line 22 ~ doScroll ~ direction", direction)
+            console.log("🚀 ~ file: nativeScroll.feature.js ~ line 24 ~ doScroll ~ distance", distance)
+
+            console.log('scrollbar ', scrollbar)
+        console.log('scrollbar width ', scrollbar.clientWidth)
+        console.log('oneScrollbarItem ', oneScrollbarItem)
+        console.log('oneScrollbarItem width ', oneScrollbarItem.clientWidth)
+
+        if (direction === 1) {
+            console.log('right clicked')
+            if (isTeaser) uxAction('Eventkalender:: Pfeil rechts geklickt', 1)
+            else uxAction('Eventkalender-Monat:: Pfeil rechts geklickt', 1)
+        } else {
+            console.log('left clicked')
+            if (isTeaser) uxAction('Eventkalender:: Pfeil links geklickt', 1)
+            else uxAction('Eventkalender-Monat:: Pfeil links geklickt', 1)
+        }
+        console.log("🚀 ~ file: nativeScroll.feature.js ~ line 42 ~ doScroll ~ hasNativeSmoothScroll", hasNativeSmoothScroll)
+
+        if (hasNativeSmoothScroll) {
+            scrollbar.scrollLeft += distance
+            console.log("🚀 ~ file: nativeScroll.feature.js ~ line 43 ~ doScroll ~ scrollbar.scrollLeft", scrollbar.scrollLeft)
+        } else {
+            console.log('start smooth scroll')
+            startSmoothScroll(scrollbar.scrollLeft, Date.now(), distance)
+        }
+    }
+    const startSmoothScroll = function (start_pos, start_time, distance) {
+        clearRequestInterval(smoothScrollInterval)
+
+        smoothScrollInterval = requestInterval(function () {
+            loopSmoothScroll(start_pos, start_time, distance)
+        }, 16)
+    }
+    const loopSmoothScroll = function (start_pos, start_time, distance) {
+        let timeLapsed = Date.now() - start_time,
+            duration = 900,
+            percentage = timeLapsed / duration
+
+        percentage = percentage > 1 ? 1 : percentage
+        console.log("🚀 ~ file: nativeScroll.feature.js ~ line 61 ~ loopSmoothScroll ~ percentage", percentage)
+
+        scrollbar.scrollLeft = start_pos + distance * easeInOutCubic(percentage)
+
+        if (percentage === 1) {
+            console.log('stop smooth scroll')
+            clearRequestInterval(smoothScrollInterval)
+        }
+    }
+
+    const easeInOutCubic = function (time) {
+        // 'easeInOutCubic' - acceleration until halfway, then deceleration
+        // time = values from 0 to 1
+        return time < 0.5
+            ? 4 * time * time * time
+            : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1
+    }
+
+    if (hr$('.js-ns-scroll.-horizontal', rootElement).length > 0) {
+        scrollbar = hr$('.js-ns-scroll.-horizontal', rootElement)[0]
+        buttons = hr$('.js-ns-button', rootElement)
+        oneScrollbarItem = hr$('.js-ns-item', rootElement)[0]
+        hasNativeSmoothScroll = isNativeSmoothScrollEnabledOn(scrollbar)
+        let initiallySelectedMonth = hr$('.js-ns-month.-selected', rootElement)[0]
+        if (!initiallySelectedMonth) {
+            initiallySelectedMonth = hr$('.js-ns-month.-currentMonth', rootElement)[0]
+        }
+
+        if (initiallySelectedMonth) {
+            scrollbar.scrollLeft = initiallySelectedMonth.offsetLeft
+        }
+
+        if (hideScrollbar) {
+            scrollbar.style.marginBottom = scrollbar.clientHeight - scrollbar.offsetHeight + 'px'
+        }
+
+        for (let i = 0; i < buttons.length; i++) {
+            buttons[i].addEventListener('click', doScroll.bind(this))
+            buttons[i].addEventListener('touch', doScroll.bind(this))
+        }
+    } else {
+        console.log(
+            'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.-horizontal'
+        )
+    }
+}
+
+export default NativeScroll

package/dist/assets/js/components/modal/modal.feature.js

@@ -0,0 +1,38 @@
+import { hr$, listen, unlisten } from 'hrQuery'
+
+const Modal = (context) => {
+    const { options } = context,
+        { element: rootElement } = context,
+        modalTriggerId = options.modalTriggerId ? '#' + options.modalTriggerId : '',
+        modalTrigger = hr$(modalTriggerId)[0],
+        modalCloseTriggers = hr$('.js-modal-close', rootElement),
+        modal = hr$('.js-modal', rootElement)[0]
+
+    const configureEventListeners = () => {
+        listen('click', show, modalTrigger)
+
+        modalCloseTriggers.forEach((modalCloseTrigger) => {
+            listen('click', close, modalCloseTrigger)
+        })
+    }
+
+    const show = () => {
+        modal.showModal()
+        listen('click', closeFromOutside, modal)
+    }
+
+    const closeFromOutside = (event) => {
+        if (event.target === modal) {
+            unlisten('click', closeFromOutside, modal)
+            close()
+        }
+    }
+
+    const close = () => {
+        modal.close()
+    }
+
+    configureEventListeners()
+}
+
+export default Modal

package/dist/views/components/base/image/responsive_image.hbs

@@ -10,6 +10,7 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
+
 {{#withParam this.responsiveImage _type _variant }}
     {{#if this.asPicture}}
         <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">

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

@@ -1,15 +1,3 @@
-{{#with this.link}}
-    <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
-        class="sb-link{{#if ../_css}} {{../_css}}{{/if}} {{#if ../this.content.isFileDownload}} js-load{{/if}}{{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"
-        {{#if ../_doNavigationTracking}}
-        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
-        {{/if}}
-        {{#if ../this.content.isFileDownload}}
-            {{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
-        {{/if}}
-        {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
-        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
-    >
-{{/with}}  
-        {{~ decorator_body ~}}   
-    </a>
+{{> components/base/link_open _clickLabelPrefix1=_clickLabelPrefix1 _clickLabelPrefix2=_clickLabelPrefix2 _clickLabelType=_clickLabelType _css=_css _doNavigationTracking=_doNavigationTracking _isAriaHidden=_isAriaHidden _isSelected=_isSelected _selectedCssClass=_selectedCssClass}}
+    {{~ decorator_body ~}}   
+</a>

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

@@ -0,0 +1,13 @@
+{{#with this.link}}
+    <a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}} 
+        class="sb-link js-load{{#if ../_css}} {{../_css}}{{/if}} {{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"
+        {{#if ../_doNavigationTracking}}
+        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
+        {{/if}}
+        {{#if ../this.isFileDownload}}
+            {{#with ../this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
+        {{/if}}
+        {{#if this.isTargetBlank}} target="_blank"  rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+        {{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+    >
+{{/with}}  

package/dist/views/components/button/button_pseudo_v2.hbs

@@ -0,0 +1,12 @@
+
+<span
+    class='px-4 py-2.5 border flex items-center font-heading
+        {{inline-switch
+            _type
+            '["hollow","hollow-white","inverted"]'
+            '["text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
+        }}
+        {{#if _css}} {{_css}}{{/if}}'
+>
+    {{> @partial-block }}
+</span>

package/dist/views/components/button/button_v2.hbs

@@ -0,0 +1,7 @@
+<button{{#if _id}} id="{{_id}}"{{/if}} class="border flex items-center px-4 py-2.5 ds-button {{inline-switch
+            _type
+            '["hollow","hollow-white","inverted"]'
+            '["text-button-hollow border-button-hollow fill-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted fill-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:fill-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted fill-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
+        }}{{#if _css}} {{_css}}{{/if}}{{#if _openModal}} js-modalButton{{/if}}"{{#if _openModal}} aria-haspopup="true"{{/if}}>
+    {{> @partial-block }}
+</button>

package/dist/views/components/button/components/button_icon.hbs

@@ -0,0 +1 @@
+{{> components/base/image/icon _addClass=(appendToDefault _css "w-4 h-4 fill-inherit ") _icon=_icon _iconmap=_iconmap}}

package/dist/views/components/button/components/button_label.hbs

@@ -0,0 +1 @@
+<span class="{{#if _css}} {{_css}}{{/if}}">{{_label}}</span>

package/dist/views/components/button/components/button_pseudo_link.hbs

@@ -0,0 +1,3 @@
+{{> components/base/link_open _css=(appendToDefault _css "ds-link") _isAriaHidden=_isAriaHidden}}
+    {{> @partial-block }} 
+</a>

package/dist/views/components/event/artist.hbs

@@ -0,0 +1 @@
+<span class="font-bold uppercase">{{this.name}}</span>{{#with this.role}} | <span>{{this}}</span>{{/with}}

package/dist/views/components/event/calendar/event_calendar.hbs

@@ -0,0 +1,3 @@
+<div class="flex flex-col border-event-calendar-secondary border gap-x-4"> 
+    {{> @partial-block }}
+</div>

package/dist/views/components/event/calendar/event_calendar_content.hbs

@@ -0,0 +1,18 @@
+<div class="js-fr-content">
+    {{#each this.months}}
+        {{#each this.days}}
+            {{#each this.instants}}
+                {{#unless this.isDateInstant}}
+                    {{> components/event/calendar/event_calendar_event_teaser _showTeaser=../this.isFirstAvailable _withConcertInfo=../../../_withConcertInfo}}
+                {{/unless}}
+            {{/each}}
+        {{/each}}
+    {{/each}}
+    {{#unless this.hasFutureEventsFromNow}}
+        <article class="p-4 js-fr-error-target">
+            <p class="">
+                {{loca "event_calendar_no_events_available"}}
+            </p>
+        </article>
+    {{/unless}}
+</div>

package/dist/views/components/event/calendar/event_calendar_event_teaser.hbs

@@ -0,0 +1,60 @@
+<article id="{{this.startDate.htmlDate}}" class="flex col-span-12 md:flex-row gap-y-3 gap-x-4 md:px-0 js-fr-target{{#unless @first}} border-t border-event-calendar-secondary{{/unless}}{{#unless _showTeaser}} hidden{{/unless}}" x-data="{ avStart: false }">
+    <div class="border-none h-full">
+        <div class="relative">
+            <div class="flex flex-col items-stretch sm:flex-row">
+                <div class="flex basis-full w-full order-2 py-1 sm:basis-7/12 sm:w-7/12 sm:order-1">
+                    <div class="flex flex-col  basis-2/12 w-2/12 align-top items-center justify-center px-4 py-3  border-dotted border-r border-event-calendar-secondary">
+                        {{#with this.startDate}}
+                            <span class='text-base font-serif'>{{this.weekdayNameShort}}</span>
+                            <span class='text-3xl font-serif font-bold'>{{this.day}}</span>
+                            <span class='text-base font-serif'>{{this.monthNameShort}}</span>
+                        {{/with}}
+                    </div>
+                    <div class="flex flex-col items-start basis-10/12 w-10/12">
+                        <div class="absolute top-0 left-0 w-full sm:static">
+                            <div class="ar-4-3 sm:ar-auto">
+                                <header class="absolute bottom-0 left-0 p-4 sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent">
+                                    {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
+                                        {{#> components/teaser/components/teaser_header}}
+                                            {{#with this.label}}
+                                                {{#> components/label/label_group}}
+                                                    {{> components/label/label_test _type=this.type _text=(loca this.loca) _css="mr-2"}}
+                                                    {{#if ../this.hasStatus}}
+                                                        {{> components/event/event_status _status=(loca ../this.statusDescriptionForLabelShort)}} 
+                                                    {{/if}}
+                                                {{/components/label/label_group}}
+                                            {{/with~}}
+                                            {{#> components/teaser/components/teaser_headline _headlineTag="h3"}}
+                                                {{#if this.topline}}
+                                                    {{> components/teaser/components/teaser_topline _text=this.topline}}
+                                                {{/if}}
+                                                {{> components/teaser/components/teaser_title_test _text=this.title _css="text-2xl"}}
+                                                {{> components/event/event_tags this.eventtags}} 
+                                            {{/components/teaser/components/teaser_headline}}
+                                        {{/components/teaser/components/teaser_header}} 
+                                    {{/decorator}}
+                                </header>
+                            </div>
+                        </div>
+                        {{> components/event/event_details this}}
+                        {{#with this.ticketLink}}
+                            {{> components/event/event_ticket_button}}
+                        {{/with}}
+                    </div> 
+                </div>
+                <figure class="basis-full w-full order-1 sm:basis-5/12 sm:w-5/12 sm:order-2 ar-4-3 sm:ar-16-9">
+                    {{> components/base/image/responsive_image this.image _type="event-teaser" _variant="100" _addClass="w-full"}}
+                </figure>
+            </div>
+        </div>
+        {{#if _withConcertInfo}}
+            {{#with this.concertInfo}}
+                {{#unless this.isEmpty}}
+                <div class="flex flex-col grow-0 shrink basis-full py-7 w-full border-event-calendar-secondary border-t border-dotted">
+                    {{> components/event/concert_info}}
+                </div>
+                {{/unless}}
+            {{/with}}
+        {{/if}}
+    </div>
+</article>

package/dist/views/components/event/calendar/event_calendar_footer.hbs

@@ -0,0 +1,8 @@
+<footer class='bg-event-calendar-primary text-center'>
+    {{#decorator
+        'components/base/link'
+        _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3 ds-link'
+    }}
+        {{loca 'event_calendar_monthly_overview_link'}}
+    {{/decorator}}
+</footer>

package/dist/views/components/event/calendar/event_calendar_heading.hbs

@@ -0,0 +1,3 @@
+<{{if _headlineTag _headlineTag "h2"}} class="flex font-bold py-2 gap-x-4 items-center justify-center bg-event-calendar-primary"> 
+    <span class="text-white text-2xl leading-6 w-full text-center">{{#if this.title}}{{this.title}}{{else}}{{loca "event_calendar_title"}}{{/if}}</span>
+</{{if _headlineTag _headlineTag "h2"}}>

package/dist/views/components/event/calendar/event_calendar_inline.hbs

@@ -0,0 +1,3 @@
+{{#each this.inlineItems~}}
+    {{> components/event/calendar/event_calendar_event_teaser}}
+{{/each ~}}

package/dist/views/components/event/calendar/event_calendar_nav.hbs

@@ -0,0 +1,27 @@
+<nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}' data-hr-filterer-ds="{}">
+    <button class="block border-0 ml-4 absolute left-0 min-w-3 min-h-3 top-1/2 js-ns-button -left" aria-hidden="true">
+        {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
+    </button>
+    <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
+        {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
+    </button>
+    <div class="flex relative max-w-100vw ml-14 mr-14 overflow-hidden box-border border-teal-600">
+        <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
+            {{#each this}}
+                <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
+                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
+                    this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
+                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3 ">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <ul class="flex">
+                        {{#each this.days}}
+                            <li class="inline-block h-full group cursor-pointer js-ns-item{{#if
+                                this.isStartOfWeek}} border-l border-event-calendar-secondary{{/if}}">
+                                {{> components/event/calendar/event_calendar_nav_item _contentUrl=../this.contentUrl}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</nav>