hr-design-system-handlebars 1.33.3 → 1.34.0

package/dist/views_static/components/teaser/podcast/podcast_player.hbs

@@ -0,0 +1,95 @@
+<div class="flex col-span-12 p-5">   
+  <div class="flex flex-col grow">
+  {{!-- First Row --}}
+    <div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
+      <div class="flex flex-col grow">  
+        <div class="flex max-h-6">
+          {{!-- Label / Airdate --}}
+          {{#with label}} 
+            <div class="">
+              <span class='sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia'>
+                {{ loca this.loca }}
+              </span>
+            </div> 
+          {{/with}}
+          
+          
+            <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
+              {{~#with airdateDate}}
+                <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
+              {{/with}}
+
+              {{!-- Download --}}
+              {{> components/teaser/podcast/podcast_downloadbutton 
+                _addClass=""
+                _iconClass="h-6 w-6 text-podcast-text fill-current"
+                _url=this.podcastDownloadUrl }}
+
+            </div>
+        </div>
+
+        {{!-- Überschrift: --}}
+        <div class="flex pb-5 pr-2 md:pr-5">          
+          {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}  
+        </div>
+
+      </div>
+
+      {{!-- Podcast Image      --}}
+      <div class="flex flex-col ">
+        <div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
+          {{> components/base/image/responsive_image this.teaseritem 
+            _type="podcastEpisodePlayer"
+            _variant="default"
+            _addClass="overflow-hidden"
+            _noDelay=this.dontLazyload 
+            _addClassImg="w-full block"
+          }}
+        </div>
+      </div>
+
+    </div>
+
+    {{!-- Player UI --}}
+    <div class="flex {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}}" 
+      x-data="playaudio()"
+      x-init="listenToGlobalStop()"
+      ax-load
+      x-ignore
+      ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+      {{> components/teaser/podcast/podcast_player_ui 
+        _isPlaylistPlayer=false
+        _podcastDuration=duration
+        _id=(nextRandom) 
+        _first=true
+      }}    
+    </div>    
+  
+    {{!-- Abo-Dropdown    --}}
+    <div class="flex flex-row pt-5">
+      {{#with this.podcastChannel}}       
+        {{> components/teaser/podcast/podcast_subscribe_button}}
+      {{/with}}
+
+      {{#with this.podcastChannel}}    
+        {{!-- Sendungs-Link --}}
+        <div class="flex justify-end w-full pl-4">
+          <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
+            <span class="self-end font-bold">Zur Sendung</span>
+            <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
+          </div>
+        </div>
+      {{/with}}          
+    </div>
+  </div>  
+</div>
+
+{{#unless _isSinglePage}}
+  {{#unless this.hideShortText}}
+      {{~#with this.shorttext}}
+          <div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
+              <span class="c-teaser__shorttext"> {{this}} </span>
+          </div>
+      {{/with~}}
+  {{/unless}}
+{{/unless}}

package/dist/views_static/components/teaser/podcast/podcast_player_ui.hbs

@@ -0,0 +1,97 @@
+
+    <div class="flex flex-wrap w-full js-load">
+        <div class="flex {{#if _isPlaylistPlayer}}items-start{{else}}items-center{{/if}} w-full flex-nowrap">
+
+            {{!-- Start/StopButton       --}}
+            <div id="playbutton{{_id}}" class="flex">
+                {{> components/teaser/podcast/podcast_playbutton 
+                _css="mr-4" 
+                _id = _id
+                _alpineClick=(loca "play_button_alpine_click" _id) }}
+            </div>
+
+            <div class="flex flex-wrap items-start w-full -mt-0.5">
+                {{#if _isPlaylistPlayer}}                   
+                    <div class="flex w-full">
+
+
+
+                        {{!-- Airdate     --}}
+                        <div class="text-xs grow font-headingSerif text-podcast-text">
+                            {{#unless ../../../../this.isSingleChannel ~}}
+                                <span>{{this.podcastChannel.title}}</span>
+                                <span class="mx-1">|</span>
+                            {{/unless~}}
+                            <time datetime="{{this.airdateDate.htmlDateTime}}">{{this.airdateDate.date}}</time>
+                        </div>
+
+                        {{!-- Download --}}                        
+                        {{> components/teaser/podcast/podcast_downloadbutton 
+                            _addClass="-mb-2 ml-2"
+                            _iconClass="h-6 w-6 text-podcast-text fill-current"
+                            _url=this.podcastDownloadUrl 
+                        }}
+                        
+                    </div>
+
+                    <div class="flex w-fit max-w-3/4 ">       
+                        {{> components/teaser/podcast/podcast_item_title 
+                            _title=this.title 
+                            _addClass="" }}  
+                    </div>   
+                {{/if}}
+
+                {{!-- Range Slider     --}}
+                <div class="flex w-full transition-all overflow-hidden {{#if _first}}max-h-9{{else}}max-h-0{{/if}}">
+                    <input 
+                        {{#unless @first}}x-cloak{{/unless}}
+                        x-ref="range" 
+                        id="range{{_id}}" 
+                        x-on:input="rangeInput({{_id}})" 
+                        type="range" {{!-- x-bind:value="currentTimePercentage" --}} 
+                        min="0" 
+                        max="1000"
+                        value="0"
+                        class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider" 
+                        aria-label="Schieberegler" >  
+                </div>
+
+                {{#if _isPlaylistPlayer}}
+                    {{!-- Meta Time usw. --}}
+                    <div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " class="flex w-full"> 
+                        {{> components/teaser/podcast/podcast_timedisplay 
+                        _id=_id
+                        _duration=duration
+                        _currentTimeClasses="font-bold text-podcast-text" 
+                        _durationClasses="text-podcast-text" 
+                        _containerCss="flex text-sm grow font-heading" }}
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+        
+        {{#unless _isPlaylistPlayer}}
+            {{!-- Meta Time usw. --}}
+            <div x-init="setTime( '{{_podcastDuration}}', '{{_id}}' ); " >
+            {{> components/teaser/podcast/podcast_timedisplay 
+                _id=_id
+                _duration=duration 
+                _currentTimeClasses="font-bold text-podcast-text" 
+                _durationClasses="text-podcast-text" 
+                _containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}              
+            </div>
+        {{/unless}}
+        
+        {{!-- AudioElement --}}
+        {{~#if this.audioUrl ~}}
+            <audio   
+                class="{{_id}} hidden" 
+                data-id="{{_id}}"
+                x-init="registerPlayer('{{_podcastDuration}}','{{_id}}')"
+                @stopotherplayers.window="stopAllOtherPlayers({{_id}})" 
+                data-prop-media-metadata='{{json this.mediaMetadata}}'>
+                <source src={{this.audioUrl}} type='audio/mp3'/>
+                
+            </audio>
+        {{/if}}
+    </div>

package/dist/views_static/components/teaser/podcast/podcast_playlist_player.hbs

@@ -0,0 +1,79 @@
+<div class="flex col-span-12 pb-5 border-b border-white">
+  <div class="flex flex-col grow">
+    {{!-- First Row --}}
+    <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">
+      <div class="flex flex-col pr-5 grow">
+        <div class="flex max-h-6">
+          {{!-- Label / Airdate --}}
+          {{#with label}}
+            <span
+              class='sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia'>
+              {{ loca this.loca }}
+            </span>
+          {{/with}}
+        </div>
+
+        {{!-- Überschrift: --}}
+        <div class="flex pb-5 pr-2 md:pr-5">
+          {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
+        </div>
+
+        {{!-- {{#switch this.realTeaserSize }}
+          {{#case "100"}}
+            {{> components/teaser/podcast/podcast_playlist_shorttext}}
+          {{/case}}
+        {{/switch}} --}}
+
+        {{> components/teaser/podcast/podcast_playlist_shorttext}}
+      </div>
+
+      {{!-- Podcast Image --}}
+      <div class="flex flex-col pb-5">
+        <div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
+          {{> components/base/image/responsive_image this.teaseritem
+            _type="podcastEpisodePlayer"
+            _variant="default"
+            _addClass="overflow-hidden"
+            _noDelay=this.dontLazyload
+            _addClassImg="w-full block"
+          }}
+        </div>
+      </div>
+    </div>
+
+    {{!-- {{#switch this.realTeaserSize }}
+      {{#case "50"}}
+        <div class="flex flex-row w-full px-5 md:pl-5">
+          {{> components/teaser/podcast/podcast_playlist_shorttext}}
+        </div>
+      {{/case}}
+    {{/switch}} --}}
+    
+    {{!-- Abo-Dropdown --}}
+    {{#if this.isSingleChannel}}
+      <div class="flex flex-row px-5 md:pr-0"> 
+        {{> components/teaser/podcast/podcast_subscribe_button}}
+      </div>
+    {{/if}} 
+  </div>
+</div>
+
+{{!-- Player UI --}}
+<div  class="flex flex-col col-span-12 gap-5 px-5"
+  x-data="playaudio()" 
+  x-init="listenToGlobalStop()" 
+  ax-load 
+  x-ignore
+  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
+    {{#each this.playlistItems}}
+      <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
+        {{> components/teaser/podcast/podcast_player_ui
+          _isPlaylistPlayer=true
+          _podcastDuration=this.duration
+          _title=this.title
+          _id=(nextRandom)
+          _first=@first
+        }}
+      </div>
+    {{/each}}
+</div>

package/dist/views_static/components/teaser/podcast/podcast_playlist_shorttext.hbs

@@ -0,0 +1,10 @@
+{{!-- Shorttext --}}
+{{#unless _isSinglePage}}
+    {{#unless this.hideShortText}}
+    {{~#with this.shorttext}}
+        <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
+        <span class="c-teaser__shorttext"> {{this}} </span>
+        </div>
+    {{/with~}}
+    {{/unless}}
+{{/unless}}

package/dist/views_static/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -0,0 +1,69 @@
+
+<div x-data="{
+        open: {{#if storybookOpen}}true{{else}}false{{/if}},
+        toggle() {
+            if (this.open) {
+                return this.close()
+            }
+            this.$refs.button.focus()
+            this.open = true
+        },
+        close(focusAfter) {
+            if (! this.open) return
+            this.open = false
+            focusAfter && focusAfter.focus()
+        }}"
+        x-on:keydown.escape.prevent.stop="close($refs.button)"
+        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
+        x-id="['dropdown-button']"
+        class="relative h-10 z-9999"
+    >
+
+    {{!-- Button --}}
+    {{#with this}}
+        {{#> components/button/button _size="md" _disableButtonPress=true}}
+            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}  
+            <span x-cloak x-show="open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+            <span x-show="!open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+        {{/components/button/button}}
+        {{#*inline "htmlProperties"}}
+        x-ref="button" 
+        x-on:click="toggle()" 
+        :aria-expanded="open" 
+        :aria-controls="$id('dropdown-button')" 
+        :class="open ? 'drop-shadow' : ''" 
+        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'
+        {{/inline}}
+    {{/with}}
+
+    {{!-- Flyout --}}
+    <div
+        x-ref="panel"
+        x-show="open"
+        x-transition.origin.top.left
+        x-on:click.outside="close($refs.button)"
+        :id="$id('dropdown-button')"
+        style="display: none;"
+        class="left-0 w-full text-sm text-white font-heading grow bg-podcast-text"
+    >
+        {{~#with this.podcastHoster~}}
+        <ul>
+            {{~#each this~}}
+                <li class="{{#unless @last}}border-b{{/unless}}"> 
+                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500 js-load"
+                        title="{{this.podcastHosterName}}" 
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href="{{this.podcastHosterUrl}}"
+                        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:{{this.podcastHosterName}}"}]}'>{{this.podcastHosterName}}</a>
+                </li>
+            {{~/each~}}
+        </ul>
+        {{~/with~}}
+        
+    </div>
+</div>

package/dist/views_static/components/teaser/podcast/podcast_timedisplay.hbs

@@ -0,0 +1,5 @@
+<div id="timedisplay{{_id}}" class="{{_containerCss}}">
+    <span class="{{_currentTimeClasses}} js-currentTime" id="currentTime{{_id}}" >0:00</span>
+    <span class="{{_durationClasses}} px-0.5"> / </span>
+    <span class="{{_durationClasses}} js-audioDuration" id="audioDurationFancy{{_id}}">{{_duration}}</span>
+</div>

package/dist/views_static/components/teaser/podcast/podcast_title.hbs

@@ -0,0 +1,13 @@
+{{#if this.isSingleChannel}}
+    {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
+        <span class="mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
+            {{~_title~}}
+        </span>
+    {{/components/base/link}}
+{{else}}
+    <div class="font-title text-base mt-2.5 text-podcast-text">
+        <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
+            {{~_title~}}
+        </span>
+    </div>
+{{/if}}

package/dist/views_static/components/teaser/stage/stage_text.hbs

@@ -0,0 +1,42 @@
+<div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition '["right50"]' '[" justify-end"," justify-start"]'}}">
+    <div class="relative p-4 rounded-2xl bg-stageTextBox/85 {{inline-switch this.stageTextPosition '["left100"]' '[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]'}} ">
+        {{#>components/base/link _link=this.link _css="ds-teaser-focus before:rounded-2xl"}}
+            {{#> components/teaser/components/teaser_header}}
+                {{#with this.label}}
+                    {{#> components/label/label_group _css="!text-stageText"}}
+                        {{> components/label/label _css="text-stageText" _type=this.type _text=(loca this.loca)}}
+                        {{> components/label/label_byline _css="ml-2 text-inherit"}}
+                    {{/components/label/label_group}}
+                {{/with~}}
+                {{#> components/teaser/components/teaser_headline _css="text-stageText" _headlineTag="h2"}}
+                    {{#if this.topline}}
+                        {{> components/teaser/components/teaser_topline _css="!text-stageText" _text=this.topline}}
+                    {{/if}}
+                    {{> components/teaser/components/teaser_title _css="text-stageText" _text=this.title _size="100" _teaserType="stage"}}
+                    {{#with this.eventtags}}
+                        {{> components/event/event_tags this _css="hidden sm:block !text-inherit"}} 
+                    {{/with}}
+                {{/components/teaser/components/teaser_headline}}
+                {{#if this.showProfileInfoAsByline}}
+                    <p class="block mt-3 text-stageText font-headingSerif">{{this.profiles}}</p>
+                {{/if}}
+            {{/components/teaser/components/teaser_header}}
+            {{#if this.showShorttext}}
+                <p class="pt-4 hidden sm:block text-stageText">{{this.shorttext}}</p>
+                {{#if this.link.hasIcon}}
+                <span class="flex items-end space-around hover:underline decoration-1 text-stageLink">[{{this.link.readMoreText.readMore}}
+                    {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="w-5 h-5 self-baseline fill-current ml-1" }}]
+                </span>
+                {{/if}}
+            {{/if}}
+            {{#with this.location}}
+                {{> components/base/loadSSI this.stageLocationSsi _templatePath='components/event/stage_location.ssi' }} 
+            {{/with}}
+            {{#if this.link.hasIcon}}
+                <span class="block mt-4 hover:underline text-stageLink {{if this.showShorttext 'hidden'}}">[{{this.link.readMoreText.readMore}}
+                    {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 self-baseline fill-current ml-1" }}]
+                </span>
+            {{/if}}
+        {{/components/base/link}}
+    </div>
+</div>

package/dist/views_static/components/teaser/tabbox/group_tabbox.hbs

@@ -0,0 +1,18 @@
+<section {{#unless @first}}x-cloak {{/unless}}
+    x-show="tab === '{{this.groupTitle}}'"
+    class="pb-10"
+>
+    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-9.5 colspan-12 gap-x-6 gap-y-6">
+        {{~> components/teaser/teaser_logic/teaser_logic ~}}
+    </div>
+    {{~#if this.link~}}
+        <div class="flex justify-center min-w-0 pt-8 mx-5">
+            {{~#> components/button/link_button _link=this.link _variant="secondary" _size="lg" _css="overflow-hidden"}}
+                {{>components/button/components/button_label _label=(loca "group_tabbed_more" this.title) _css="flex-1 truncate mr-2"}}
+                {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
+            {{/components/button/link_button}}
+        </div>
+        {{#*inline "htmlProperties"~}} 
+        {{~/inline}}
+    {{~/if~}}
+</section>

package/dist/views_static/components/teaser/tabbox/teaser_tabbox.hbs

@@ -0,0 +1,22 @@
+</div>
+<div 
+  x-data="{ tab: '{{this.tabbedGroup.[0].title}}', test:true }"
+  class="grid grid-cols-12 pt-6 mx-0 mb-8 mt-14 col-full md:pt-7 bg-highlight-1 md:rounded-tl-hr md:rounded-br-hr md:col-main gap-x-6 gap-y-6"
+>
+  <section class="px-0 col-span-full sm:px-8 md:px-0">
+    <div class="flex flex-wrap gap-y-3 justify-center mb-7 mx-1.5" role="tablist">
+      {{~#each this.tabbedGroup~}}
+        {{#> components/button/button _size="sm" _css="mx-1.5" _variant="secondary" _type="button" }}
+          {{> components/button/components/button_label _css="" _label=this.title}}
+        {{/components/button/button }}
+        {{#*inline "htmlProperties"~}} 
+          :class='{"{{> components/button/utilities/button_variation_classes _variant='primary' _onBackground=false}} bg-button--dark ":tab ==="{{this.title}}",
+          "{{~> components/button/utilities/button_variation_classes _variant='secondary' _onBackground=false~}}":tab !="{{this.title}}"}' 
+          x-on:click.prevent="tab = '{{this.title}}'; " role="tab" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "{{this.title}}:TabboxClick"}]}'   
+        {{~/inline}}
+      {{~/each~}}
+    </div>
+    {{~> components/teaser/teaser_logic/teaser_logic ~}}
+  </section>
+</div>
+<div class="{{> components/grid/grid_group_wrapper_classes }}"> 

package/dist/views_static/components/teaser/teaser_alternativ.hbs

@@ -0,0 +1,19 @@
+<article class="items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:gap-x-6 sm:px-0{{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" flex-col"," px-5"," md:col-span-6 px-5"]'~}}"
+    x-data="{ avStart: false }"
+    {{#if this.isMobile1to1}}
+            :class="avStart ? 'flex-col' : 'flex-row'"
+    {{/if}} 
+    >
+    {{#if this.teaserImage}}
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3-gap-6  ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3-gap-6"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2-gap-6"]'~}}"
+            {{#if this.isMobile1to1}}
+                :class="{'ar-16-9 basis-full w-full' : avStart, 'ar-1-1 basis-2/5 w-2/5': !avStart}"
+            {{/if}}
+        >
+            {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.realTeaserSize _teaserType=this.teaserType _aspectRatio=(inline-switch this.realTeaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 
+        </figure>
+        {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.realTeaserSize '["hero","100","50"]' '["basis-full w-full md:basis-1/3-gap-6"," basis-3/5 w-3/5 md:basis-2/3-gap-6"," basis-3/5 w-3/5 md:basis-1/2-gap-6"]') }}
+    {{else}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full" }}
+    {{/if}}
+</article>

package/dist/views_static/components/teaser/teaser_event_calendar.hbs

@@ -0,0 +1,8 @@
+<article class="col-span-12{{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6"]'}}">
+    {{#> components/event/calendar/event_calendar}}
+        {{> components/event/calendar/event_calendar_heading _headlineTag="h3"}}
+        {{> components/event/calendar/event_calendar_nav this.eventCalendar.months}}
+        {{> components/event/calendar/event_calendar_content this.eventCalendar}}
+        {{> components/event/calendar/event_calendar_footer}}
+    {{/components/event/calendar/event_calendar}}
+</article>

package/dist/views_static/components/teaser/teaser_indextext.hbs

@@ -0,0 +1,23 @@
+<article
+    class='mx-5 sm:mx-0 p-8 md:p-10 relative col-span-12 flex flex-col gap-x-4
+        {{~inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}
+        {{~inline-switch
+            this.teaserType
+            '["accented","boxed","highlighted"]'
+            '[" bg-highlight-1"," bg-white border border-primary"," bg-highlight-2"," bg-highlight-1"]'
+        }}
+        '
+>
+    <h3
+        class='text-2xl md:text-4xl font-title
+            {{~inline-switch this.teaserType '["highlighted"]' '[" text-white",""]'}}'
+    >
+        {{this.title}}
+    </h3>
+    <p
+        class='mt-6 text-sm md:text-base font-copy
+            {{~inline-switch this.teaserType '["highlighted"]' '[" text-white",""]'}}'
+    >
+        {{{this.shorttext}}}
+    </p>
+</article>

package/dist/views_static/components/teaser/teaser_logic/teaser_logic.hbs

@@ -0,0 +1,17 @@
+{{~#each this.logicItems}}
+    {{~#if this.isSsi~}}        
+        {{#if (isStorybook)}}  
+            {{> components/teaser/teaser_logic/teaser_logic.ssi }} 
+        {{else}}
+            {{{this.ssi}}}
+        {{/if}} 
+    {{~else}}
+        {{~#with this.includeModel~}}
+            {{~#if (isStorybook)~}}
+                {{~> components/base/load_dynamic _templatePath=../includePath ~}} 
+            {{~else~}}
+                {{~> (lookup ../. 'includePath')~}}
+            {{~/if~}}
+        {{~/with~}}
+    {{~/if~}}
+{{/each~}}

package/dist/views_static/components/teaser/teaser_logic/teaser_logic.ssi.hbs

@@ -0,0 +1,12 @@
+{{~#with this.logicItem~}}
+    {{~#with this.includeModel~}}
+        {{~#if (isStorybook)~}}
+            {{~> components/base/load_dynamic _templatePath=../includePath ~}}
+        {{~else~}}
+            {{~#with this.cacheKey~}}
+                {{~addCacheEntry this ~}}
+            {{~/with~}}
+            {{~> (lookup ../. 'includePath')~}}
+        {{~/if~}}
+    {{~/with~}}
+{{~/with~}}

package/dist/views_static/components/teaser/teaser_poster.hbs

@@ -0,0 +1,31 @@
+<article class="mx-5 sm:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch this.teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
+    <figure class="ar-1-1" aria-hidden="true">
+        {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
+    </figure> 
+    <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
+        {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
+            {{#> components/teaser/components/teaser_header}}
+                {{#with this.label}}
+                    {{#> components/label/label_group}}
+                        {{> components/label/label _type=this.type _text=(loca this.loca)}}
+                        {{> components/label/label_byline _css="ml-2"}}
+                    {{/components/label/label_group}}
+                {{/with~}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag="h2" _css="text-shadow text-center text-white mb-4 mx-4 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8 line-clamp-4 xs:line-clamp-6 md:line-clamp-4 lg:line-clamp-5"}}
+                    {{#if this.topline}}
+                        {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
+                    {{/if}}
+                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType}}
+                    {{#if this.extendedTitle}}
+                        {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
+                    {{/if}}
+                {{/components/teaser/components/teaser_headline}}
+            {{/components/teaser/components/teaser_header}}
+        {{/components/base/link}}
+        <span class="absolute flex items-end justify-center w-full h-full ds-cta">
+            {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
+            {{/components/button/link_button}}
+        </span>
+    </div>
+</article>

package/dist/views_static/components/teaser/teaser_stage.hbs

@@ -0,0 +1,24 @@
+{{#with this.teaser}}
+    <div class="grid grid-page relative">
+        <article class="col-full grid grid-page relative overflow-hidden before:content-[''] before:absolute before:h-5 before:shadow-stage before:z-10 before:-top-5 before:-left-2.5 before:-right-2.5 after:content-[''] after:absolute after:bottom-0 after:col-full after:w-full after:block after:h-5 after:bg-stagePrimary lg:after:relative">
+            {{#unless this.isWide}}
+                <div class="absolute w-15/12">
+                    {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
+                </div>   
+            {{/unless}}
+            <div class="col-full lg:col-main lg:px-9.5 relative">
+                <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
+                    <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
+                        {{#if this.isWide}}
+                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="wide" _addClass="w-full block" _addClassImg="w-full absolute inset-0"}}
+                        {{else}}
+                            {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default"}}
+                        {{/if}}
+                    </div>
+                    {{> components/teaser/stage/stage_text}}
+                </div>
+            </div>
+
+        </article>
+    </div>
+{{/with}}

package/dist/views_static/components/teaser/teaser_standard.hbs

@@ -0,0 +1,29 @@
+<article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
+{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
+{{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}} 
+ "
+    x-data="{ avStart: false }"
+    {{#if this.isMobile1to1}}
+            :class="avStart ? 'flex-col' : 'flex-row'"
+    {{/if}}   
+    >
+    {{#if this.teaserImage}}
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
+        {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
+        {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >    
+            {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}     
+        </figure>
+        {{#if this.displayTeaserBodyAsImageOverlay}}
+            {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
+                <div class="basis-1/12 flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed">
+                    {{> components/event/instant_dates}}
+                </div>
+                {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
+            {{/decorator}}
+        {{else}}
+            {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
+        {{/if}}
+    {{else}}
+        {{> components/teaser/components/teaser_body _outerCssClasses="basis-full"}}
+    {{/if}}
+</article>