hr-design-system-handlebars 1.75.6 → 1.77.0

package/dist/views/components/site_header/section_navigation/section_navigation.hbs

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}

package/dist/views/components/site_header/service_navigation/service_navigation.hbs

@@ -1,5 +1,5 @@
 <div id="serviceNavMainContainer" 
-    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    class="flex w-full h-10 pl-5 pr-3 md:h-12 lg:h-16 z-110 md:pr-0 lg:px-10 col-full sm:col-main">
     <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
     <div id="serviceLogoWrapper"  
         class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">

package/dist/views/components/teaser/components/teaser_av_consumption.hbs

@@ -11,7 +11,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isAudio ~}}
-          {{#with this.toModel.audioElement}}
+          {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}                  
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _aspectRatio=../../_aspectRatio-adjust_context _noDelay=this.dontLazyload}}
@@ -22,7 +22,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isPodcast ~}}
-          {{#with this.toModel.audioElement}}
+          {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _aspectRatio=../../_aspectRatio-adjust_context _noDelay=this.dontLazyload}}
@@ -33,7 +33,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
-          {{#with this.toModel.audioLivestreamElement}}
+          {{#with this.toModel.audioLivestreamElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=../../_aspectRatio-adjust_context _noDelay=this.dontLazyload}}

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

@@ -2,7 +2,7 @@
     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">
+    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 colspan-12 gap-x-6 gap-y-6">
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}

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

@@ -1,12 +1,12 @@
 {{#with this.teaser}}
-    <div class="grid grid-page relative">
+    <div class="relative grid grid-page">
         <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 col-full lg:col-main lg:px-10">
                 <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}}

package/dist/views_static/components/content/content_footer/content_footer.hbs

@@ -18,7 +18,7 @@
                 Sendung:
                 {{#if this.link}}
                     {{#>components/base/link _link=this.link _css="text-link hover:underline"~}}
-                        <span>{{~ ../this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
+                        <span>{{~ this.programLabel ~}}</span>{{/components/base/link~}}{{~#if this.date~}},
                         <span>
                                 <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
                                       class="{{#if _isArticle}}{{else}}{{/if}} ">

package/dist/views_static/components/content/copytext/components/audio.hbs

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audio-component</div>
-{{~else~}}    
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}} 
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+{{/if}}

package/dist/views_static/components/content/copytext/components/audioeventlivestream.hbs

@@ -1,9 +1,5 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Audioevent-Livestream-component</div>
-{{~else~}}
-    {{#if this.showFullSize.isTrue }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{else}}
-        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
-    {{/if}}
-{{~/if~}}
+{{#if this.showFullSize.isTrue }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{else}}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+{{/if}}

package/dist/views_static/components/content/copytext/components/image/{figcaption.hbs → collapsible_caption.hbs}

@@ -12,17 +12,8 @@
             }"
             @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
     <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
-    {{#if _fullSize}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
-        {{#if this.caption}}
-            {{~#unless _hideCaption~}}
-                <span class="pr-3">
-                    {{this.caption}} 
-                </span>
-            {{~/unless~}}
-        {{/if}}
-        <span class="text-gray-scorpion dark:text-text-dark">
-            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
-        </span>
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{> @partial-block }}
     </div>
     <template x-if="truncated">
         <button x-cloak 

package/dist/views_static/components/content/copytext/components/image/figure.hbs

@@ -16,6 +16,9 @@
         {{/if}}
     {{/if}}
     {{#unless _voting-option}}
-        {{~> components/content/copytext/components/image/figcaption _fullSize=this.showFullSize.isTrue _cssClassCaption=_cssClassCaption~}}
+        {{~#> components/content/copytext/components/image/collapsible_caption _cssClassCaption=_cssClassCaption~}}
+                {{~> components/content/copytext/components/image/image_caption_text}}
+                {{~> components/content/copytext/components/image/image_copyright}}
+        {{/components/content/copytext/components/image/collapsible_caption }}
     {{/unless}}
 </figure>

package/dist/views_static/components/content/copytext/components/image/image_caption_text.hbs

@@ -0,0 +1,3 @@
+<span class="pr-3">
+    {{this.caption}} 
+</span>

package/dist/views_static/components/content/copytext/components/image/image_copyright.hbs

@@ -0,0 +1,3 @@
+<span class="text-gray-scorpion dark:text-text-dark">
+    {{~loca "figures_copyright"}} {{{this.copyrightWithLinks}}} 
+</span>

package/dist/views_static/components/content/copytext/components/media/media_figure.hbs

@@ -1,24 +1,32 @@
-<figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
+<figure class="relative {{_addClass}}" x-data="{ avStart: false }">
     {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
     {{#unless _voting-option}}
-        <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder dark:border-text-dark {{_cssClassCaption}}">
+        <div class="py-3 sm:py-4 border-t-[3px] border-gray-boulder dark:border-text-dark {{_cssClassCaption}}">
             {{#if this.label}}
                 {{#> components/label/label_group _css="dark:text-text-dark"}}
                     {{#with this.label}}
-                        {{> components/label/label _type=this.type _text=(loca this.loca) }}
-                        {{> components/label/label_byline _css="ml-2"}}
-                    {{/with}}
-                    {{> components/content/copytext/components/media/media_figure_byline this}}
+                        {{~> components/label/label _type=this.type _text=(loca this.loca) }}
+                        {{~> components/label/label_byline _css="ml-2"}}
+                    {{/with~}}
+                    {{~> components/content/copytext/components/media/media_figure_byline this}}
                 {{/components/label/label_group}}
             {{/if~}}
-            {{#with this.toModel.mediaBacklinkToStoryTeaser}}
-                {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
-                    {{> components/content/copytext/components/media/media_figure_headline}}
-                {{/components/base/link}}
-            {{/with}}
-        </figcaption>
+            {{#if this.isVideo}}
+                {{#with this.toModel.mediaBacklinkToStoryTeaser}}
+                    {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
+                        {{> components/content/copytext/components/media/media_figure_headline}}
+                    {{/components/base/link}}
+                {{/with}}
+            {{/if}}
+        </div>
     {{/unless}}
-    {{#if this.isVideo}}
+    {{#if this.isAudioOnDemand}}
+        {{~> components/mediaplayer/media_player this.toModel.audioElement _uiTestHook="ui-test-audio-ondemand-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+    {{/if}}
+    {{#if this.isAudioEventLivestream}}
+        {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _uiTestHook="ui-test-audio-livestream-player" _isAudioView=true _addClassImg=_addClassImg ~}}
+    {{/if}}
+    {{#if this.isVideoOnDemand}}
         {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
         {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
@@ -27,9 +35,27 @@
         {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLivestream=true _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
     {{#unless _voting-option}}
-        {{#with this.teaseritem}}
-            {{~> components/content/copytext/components/image/figcaption _fullSize=../_fullSize  _cssClassCaption=../_cssClassCaption~}}
-        {{/with}}
+        {{#if this.teaseritem}}
+            {{~#> components/content/copytext/components/image/collapsible_caption this.teaseritem _cssClassCaption="mx-5 sm:mx-0"}}
+                {{#unless ../this.isAudio}}
+                    {{~> components/content/copytext/components/image/image_caption_text}}
+                {{/unless}}
+                {{~> components/content/copytext/components/image/image_copyright}}
+                {{#if ../this.isAudio~}}
+                    <span class="mx-1">|</span>
+                    {{#with ../this.toModel.mediaBacklinkToStoryTeaser}}
+                        {{~#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"~}}
+                            <span>
+                                {{~this.readMore~}}
+                                {{~#if this.hasIcon}}
+                                    {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
+                                {{~/if~}}
+                            </span>
+                        {{/components/base/link}}
+                    {{/with}}
+                {{/if}}
+            {{~/components/content/copytext/components/image/collapsible_caption}}
+        {{/if}}
     {{/unless}}
     {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}
 </figure>

package/dist/views_static/components/content/copytext/components/media/media_figure_byline.hbs

@@ -1,15 +1,25 @@
-<span class='text-xs text-inherit font-headingSerif{{#if _css}} {{_css}}{{/if}}'>
-    {{~#if this.isVideo}}
-        {{#if this.copyright }} <span class="mx-1">|</span>{{/if}}
-        {{~#with this.copyright}}
-            {{this}}{{#if ../this.airdateDate }} <span class="mx-1">|</span>{{/if}}
-        {{/with}}
+<span class='text-xs text-inherit font-headingSerif{{#if _css}} {{_css}}{{/if~}}'>
+    {{~#if this.showAirdate}}
         {{~#with this.airdateDate ~}}
-            {{~#if this.airdateWithoutTime ~}}
+            <span class="mx-1">|</span>
+            {{#if ../this.isAudioOnDemand}}
                 <time datetime="{{this.htmlDate}}">{{this.date}}</time>
             {{else}}
-                <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime }}</time>
-            {{~/if~}}
+                {{~#if this.airdateWithoutTime ~}}
+                    <time datetime="{{this.htmlDate}}">{{this.date}}</time>
+                {{~else~}}
+                    <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime }}</time>
+                {{~/if~}}
+                {{/if}}
         {{~/with~}}
+        {{~#if this.isVideoOnDemand}}
+            {{~#with this.copyright~}}
+                <span class="mx-1">|</span>{{this}}
+            {{/with}}
+        {{else}}
+            {{~#with this.audioAuthor~}}
+                <span class="mx-1">|</span>{{this}}
+            {{/with}}
+        {{/if}}
     {{/if}}
 </span>

package/dist/views_static/components/content/copytext/components/media/media_figure_headline.hbs

@@ -1,11 +1,11 @@
 <h3 class="mt-1">
-    {{> components/base/a11y/ariaLabelText _text=this.content.readMoreScreenreader }}
+    {{> components/base/a11y/ariaLabelText _text=this.readMoreScreenreader }}
     <span class="text-lg sm480:text-xl font-headingSerif dark:text-text-dark">
-        {{this.content.title}}
+        {{this.title}}
     </span>
-    {{~#if this.content.isForeignBrand}}
+    {{~#if this.isForeignBrand}}
         <span aria-hidden=true class="ml-4">
-            [{{this.content.readMore}}
+            [{{this.readMore}}
             {{~#if this.hasIcon}}
                 {{~> components/base/image/icon _icon=this.iconName _iconmap="icons" _addClass="inline -mt-0.5 ml-1 w-5 h-5 fill-current"~}}
             {{/if~}}]

package/dist/views_static/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

package/dist/views_static/components/content/copytext/components/videolivestream.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

package/dist/views_static/components/content/copytext/copytext.hbs

@@ -1,6 +1,6 @@
 <div class="contents sm:block copytextWrapper">
     {{~#with this.leadAudio }}
-        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+        {{> components/content/copytext/components/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
     {{~/with}}    
     {{#each this.copytextParagraph }}
         {{~> components/content/copytext/copytext_body _isWebview=_isWebview ~}}

package/dist/views_static/components/content/copytext/copytext_body.hbs

@@ -27,7 +27,7 @@
         {{~#if this.isNewsletter}}
             {{> components/content/copytext/components/newsletter }}
         {{/if~}}
-        {{~#if this.isAudio}}
+        {{~#if this.isAudioOnDemand}}
             {{> components/content/copytext/components/audio }}
         {{/if~}}
         {{~#if this.isAudioEventLivestream}}
@@ -36,7 +36,7 @@
         {{~#if this.isPodcastEpisode}}
             {{> components/content/copytext/components/podcastepisode }}
         {{/if~}}
-        {{~#if this.isVideo}}
+        {{~#if this.isVideoOnDemand}}
             {{> components/content/copytext/components/video/video }}
         {{/if~}}
         {{~#if this.isLivestream}}

package/dist/views_static/components/footer/page_footer.hbs

@@ -1,6 +1,6 @@
 <footer class="relative grid justify-center w-full text-base border-t grid-page ui-test-footer pb-footer-padding-bottom text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
     <div class="absolute top-feature-box-height" x-data x-intersect="$store.footerIsVisible = true" x-intersect:leave="$store.footerIsVisible = false"></div>
-    <div class="col-full sm:col-main md:px-9.5">
+    <div class="col-full sm:col-main md:px-10">
         <span class="hidden">Footer Navigation</span>
                 
         <div class="flex flex-wrap justify-start list-none">

package/dist/views_static/components/grid/grid_group_highlight.hbs

@@ -1,6 +1,6 @@
 </div>
 <div class="grid col-full grid-page my-5 md:my-7{{inline-switch _backgroundColor '["1","2"]' '[" bg-gray-concrete"," bg-orange-bridesmaid"]'}}">
-    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
+    <section class="grid grid-cols-12 py-5 md:py-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}
         </div>

package/dist/views_static/components/grid/grid_group_tabbed.hbs

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-9.5 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-10 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }} hideGridGroupIfEmpty">

package/dist/views_static/components/grid/grid_group_wrapper_classes.hbs

@@ -1 +1 @@
-grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14
+grid grid-cols-12 bg-white pt-5 md:pt-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

package/dist/views_static/components/label/label.hbs

@@ -2,8 +2,8 @@
     class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
         {{inline-switch
             _type
-            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video"]'
-            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia"]'
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung","location","topic","video","audio"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung","bg-labelEvent","bg-labelComment","bg-labelMedia","bg-labelMedia"]'
         }}'
 >
     {{_text}}

package/dist/views_static/components/label/label_byline.hbs

@@ -1,17 +1,13 @@
 {{~#if _text~}}
-
-    <span class='font-bold font-heading{{#if _css}} {{_css}}{{/if}}'>{{~_text}}</span>
-
+    <span class='font-bold font-heading{{~#if _css}} {{_css}}{{/if}}'>{{~_text}}</span>
 {{~else~}}
-
-    {{#with this.byline}}
+    {{~#with this.byline~}}
         {{~#if this.bylineSsi~}}
-            {{> components/base/loadSSI this.bylineSsi _context=this.context _templatePath=this.bylineSsi}}
+            {{~> components/base/loadSSI this.bylineSsi _context=this.context _templatePath=this.bylineSsi~}}
         {{~else~}}
-            {{#> components/text/byline _css=../_css}}
-                {{this.bylineText}}
-            {{/components/text/byline}}
+            {{~#> components/text/byline _css=../_css~}}
+                {{~this.bylineText~}}
+            {{~/components/text/byline}}
         {{~/if~}}
     {{/with}}
-
 {{~/if~}}

package/dist/views_static/components/mediaplayer/media_player.hbs

@@ -1,2 +1,2 @@
-<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#unless _isAudioView}}ar-16-9 {{/unless}}h-full {{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+<div{{#if _isUsedInTeaser}} x-show="avStart" x-cloak{{/if}} id="{{this.ardPlayerConfig.playerId}}" class="{{#if _isAudioView}}ar-4-1 h-auto{{else}}ar-16-9 h-full{{/if}}{{~#if _addClassImg}} {{_addClassImg}}{{/if}} {{#if _isUsedInTeaser}} z-20{{/if}} js-load {{if _uiTestHook _uiTestHook 'ui-test-mediaplayer'}}" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>

package/dist/views_static/components/page/story/story_article.hbs

@@ -18,7 +18,7 @@
                     _isWebview=../_webview
                     _noDelay=true}}
             {{/if}}
-            {{#if this.isVideo}}
+            {{#if this.isVideoOnDemand}}
                {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
             {{/if}}
             {{#if this.isLivestream}}

package/dist/views_static/components/site_header/brand_navigation/brand_navigation.hbs

@@ -1,4 +1,4 @@
-<div class="grid-cols-12 px-5 lg:px-9.5 col-full sm:col-main">
+<div class="grid-cols-12 px-5 lg:px-10 col-full sm:col-main">
     {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _bgcolor="var(--color-brandnavigation-bg)" _iconcolor="primary" }}
         <nav class="flex w-full text-xs list-none text-grey-scorpion">
                 <span id="brandNavHeading" class="hidden">Navigation der Marken des Hessischen Rundfunks</span>

package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs

@@ -40,7 +40,7 @@
             {{/if}}          
         {{/if}}
         
-        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-9.5 col-main  {{/if}}{{/if}}">
+        <div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} lg:grid-cols-12 lg:px-10 col-main  {{/if}}{{/if}}">
             {{#if this.showAsFlyout}}
                 {{#each this.columns}}
                     {{> components/site_header/navigation_flyout/navigation_flyout_column _count=../this.columnCount _navtype=../../_navigationType _parent=../../_parent _flyout=true~}}

package/dist/views_static/components/site_header/section_navigation/section_navigation.hbs

@@ -1,6 +1,6 @@
 <div 
     id="sectionNav"
-    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-9.5 lg:col-main " 
+    class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:grid-cols-12 lg:px-10 lg:col-main " 
     x-effect="$el.setAttribute('aria-expanded',  $store.burgeropen || $screen('lg')); $el.setAttribute('aria-hidden', ! ($store.burgeropen || $screen('lg')))"
 >
 {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="lg" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}

package/dist/views_static/components/site_header/service_navigation/service_navigation.hbs

@@ -1,5 +1,5 @@
 <div id="serviceNavMainContainer" 
-    class="flex w-full h-10 md:h-12 lg:h-16 z-110 pl-5 pr-3 md:pr-0 lg:px-9.5 col-full sm:col-main">
+    class="flex w-full h-10 pl-5 pr-3 md:h-12 lg:h-16 z-110 md:pr-0 lg:px-10 col-full sm:col-main">
     <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
     <div id="serviceLogoWrapper"  
         class="flex items-center order-1 w-full bg-navigation-bg md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">

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

@@ -11,7 +11,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isAudio ~}}
-          {{#with this.toModel.audioElement}}
+          {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}                  
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}
@@ -22,7 +22,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isPodcast ~}}
-          {{#with this.toModel.audioElement}}
+          {{#with this.toModel.audioElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-ondemand-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="audio_button" _mediaButtonLabel="Podcast" _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}
@@ -33,7 +33,7 @@
           {{/with}}
      {{~/if~}}
      {{~#if this.isAudioEventLivestream ~}}
-          {{#with this.toModel.audioLivestreamElement}}
+          {{#with this.toModel.audioLivestreamElementForVideoView}}
                {{~> components/mediaplayer/media_player _uiTestHook="ui-test-audio-livestream-player" _isUsedInTeaser=true _addClassImg=../../_addClassImg~}}             
                {{#with ../../this}}
                     {{~> components/teaser/components/teaser_media_player _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream=true _aspectRatio=_aspectRatio _noDelay=this.dontLazyload}}

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

@@ -2,7 +2,7 @@
     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">
+    <div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 colspan-12 gap-x-6 gap-y-6">
         {{~> components/teaser/teaser_logic/teaser_logic ~}}
     </div>
     {{~#if this.link~}}

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

@@ -1,12 +1,12 @@
 {{#with this.teaser}}
-    <div class="grid grid-page relative">
+    <div class="relative grid grid-page">
         <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 col-full lg:col-main lg:px-10">
                 <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}}

package/gulpfile.js

@@ -114,7 +114,7 @@ function createSvgMapsForBrands() {
                                         },
                                     },
                                 },
-                                 'convertStyleToAttrs',  
+                                'convertStyleToAttrs',
                             ],
                         })
                     )
@@ -391,6 +391,7 @@ function watchFiles() {
 async function convertPartialsToJs() {
     src(`${options.paths.assets.views}/**/*.hbs`)
         .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '$1'))
+        .pipe(replace(/(this.[0-9a-zA-Z_.]+)-adjust_context/g, '$1'))
         .pipe(replace(/(\\")/g, '\\$1')) // replace occurences of \" by \\" to make sure that " are correctly rendered in json strings
         .pipe(htmlToJs({ concat: 'handlebar-partials.js' }))
         .pipe(dest(options.paths.dist.handlebarPartials))
@@ -399,12 +400,14 @@ async function convertPartialsToJs() {
 async function preparePartialsForDelivery() {
     src(`${options.paths.assets.components}/**/*.hbs`)
         .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '../../$1-adjust_context'))
+        .pipe(replace(/(this.[0-9a-zA-Z_.]+)-adjust_context/g, '../$1-adjust_context'))
         .pipe(dest(options.paths.dist.dist_components))
 }
 
 async function preparePartialsForStaticDelivery() {
     src(`${options.paths.assets.components}/**/*.hbs`)
         .pipe(replace(/(_[0-9a-zA-Z_]+)-adjust_context/g, '$1'))
+        .pipe(replace(/(this.[0-9a-zA-Z_.]+)-adjust_context/g, '$1'))
         .pipe(dest(options.paths.dist.dist_static_components))
 }
 

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.75.6",
+    "version": "1.77.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",