hr-design-system-handlebars 1.36.2 → 1.37.0

package/dist/views/components/article/components/podcast/podcast_episode_article.hbs

@@ -0,0 +1,40 @@
+<article class="grid grid-page">
+<div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
+</div>
+<div class="order-1 col-span-8 px-5">
+    {{> components/podcast/components/podcast_player_shorttext }}
+</div>
+<div class="order-3 col-span-8">
+    {{> components/content/content_footer/content_footer 
+        _author=this.audioAuthor
+        _showDate=this.hasDwellTime
+        _date=this.airdateDate
+        _copyright=this.copyright
+        _isArchiveContent=this.isArchiveContent
+        _posterCopyright="poster_copyright"}}
+</div>
+
+<aside class="order-4 col-full md:order-2 md:col-span-4"
+    aria-label='{{loca "appendix_title"}}'>
+    <div class="c-appendix">
+        {{#unless _webview}}
+            {{~#with this.backLinkUrl ~}}
+                {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
+            {{~/with~}}
+
+            {{~#with this.geotag ~}}
+                {{~> modules/geotag/geotag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.topictags ~}}
+                {{~> modules/topictag/topictag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.socialSharing ~}}
+                {{~> modules/socialmedia/shareit ~}}
+            {{~/with~}}
+        {{/unless}}
+    </div>
+</aside>    
+</article>

package/dist/views/components/article/components/podcast/podcast_playlist-inline.hbs

@@ -0,0 +1 @@
+{{> components/podcast/podcast_playlist_player-inline }}

package/dist/views/components/article/components/podcast/podcast_playlist_all_episodes.hbs

@@ -0,0 +1,45 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player_all_episodes _isArticlePlayer=true}}      
+    </div>
+    <aside class="grid order-2 col-span-3" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

package/dist/views/components/article/components/podcast/podcast_playlist_article.hbs

@@ -0,0 +1,60 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player _isArticlePlayer=true}}
+
+        {{~#if this.remainingPlaylistItems}}
+            <div class="flex items-center justify-center pb-5 js-load"
+                 data-hr-podcast-channel-remaining-episodes-loader='{"dynLoadTrigSelector":".js-load-remaining-items-button","dynLoadReplaceSelector":".js-placeholder-reload", "url":"{{this.reloadUrl}}"}'>
+                {{#> components/button/link_button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
+                    {{> components/button/components/button_label _label="Weitere Episoden laden"}}
+                    {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+                {{/components/button/link_button}}
+                {{#*inline "htmlProperties"}}
+                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}'
+                {{/inline}}
+            </div>
+            <div class="js-placeholder-reload"></div>
+        {{~/if~}}
+    </div>
+
+    <aside class="grid order-2 col-span-3 py-6" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

package/dist/views/components/podcast/components/podcast_player_shorttext.hbs

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 px-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
+          <div class="col-span-12 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/dist/views/components/podcast/podcast_playlist_player-inline.hbs

@@ -0,0 +1,22 @@
+{{~#with this.remainingPlaylistItems}}
+
+  <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}}
+        <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
+          {{> components/podcast/components/podcast_player_ui
+            _isPlaylistPlayer=true
+            _podcastDuration=this.duration
+            _title=this.title
+            _id=(nextRandom)
+            _first=@first
+          }}
+        </div>
+      {{/each}}
+  </div>
+
+{{/with~}}

package/dist/views/components/podcast/podcast_playlist_player.hbs

@@ -1,4 +1,4 @@
-<div class="flex col-span-12 pb-5 border-b border-white">
+<div class="flex w-full py-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}} ">
@@ -18,25 +18,17 @@
           {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
         </div>
 
-        {{!-- {{#switch this.realTeaserSize }}
-          {{#case "100"}}
-            {{> components/podcast/components/podcast_playlist_shorttext}}
-          {{/case}}
-        {{/switch}} --}}
-
         {{> components/podcast/components/podcast_playlist_shorttext}}
 
         {{!-- Abo-Dropdown --}}
         {{#if this.isSingleChannel}}
-          
             {{> components/podcast/components/podcast_subscribe_button}}
-          
         {{/if}} 
       </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", ""]'}}">
+        <div class="w-22 {{#if _isArticlePlayer}} md:w-32 lg:w-42{{else}}{{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}{{/if}} ">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
             _variant="default"
@@ -47,21 +39,11 @@
         </div>
       </div>
     </div>
-
-    {{!-- {{#switch this.realTeaserSize }}
-      {{#case "50"}}
-        <div class="flex flex-row w-full px-5 md:pl-5">
-          {{> components/podcast/components/podcast_playlist_shorttext}}
-        </div>
-      {{/case}}
-    {{/switch}} --}}
-    
-    
   </div>
 </div>
 
 {{!-- Player UI --}}
-<div  class="flex flex-col col-span-12 gap-5 px-5"
+<div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
   x-data="playaudio()" 
   x-init="listenToGlobalStop()" 
   ax-load 

package/dist/views/components/podcast/podcast_playlist_player_all_episodes.hbs

@@ -0,0 +1,65 @@
+<div class="flex w-full 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/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
+        </div>
+
+        {{> components/podcast/components/podcast_playlist_shorttext}}
+
+        {{!-- Abo-Dropdown --}}
+        {{#if this.isSingleChannel}}         
+            {{> components/podcast/components/podcast_subscribe_button}}
+        {{/if}} 
+      
+      </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>
+    
+  </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.allPlaylistItems}}
+      <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
+        {{> components/podcast/components/podcast_player_ui
+          _isPlaylistPlayer=true
+          _podcastDuration=this.duration
+          _title=this.title
+          _id=(nextRandom)
+          _first=@first
+        }}
+      </div>
+    {{/each}}
+</div>

package/dist/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,4 +1,4 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-hr rounded-br-hr col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
+<div class="flex gap-y-6 relative gap-x-4 flex-col mx-5 sm:mx-0 bg-highlight-1 rounded-tl-hr rounded-br-hr col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
     {{> components/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
 </div>
 

package/dist/views_static/components/article/components/podcast/podcast_episode_article.hbs

@@ -0,0 +1,40 @@
+<article class="grid grid-page">
+<div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
+</div>
+<div class="order-1 col-span-8 px-5">
+    {{> components/podcast/components/podcast_player_shorttext }}
+</div>
+<div class="order-3 col-span-8">
+    {{> components/content/content_footer/content_footer 
+        _author=this.audioAuthor
+        _showDate=this.hasDwellTime
+        _date=this.airdateDate
+        _copyright=this.copyright
+        _isArchiveContent=this.isArchiveContent
+        _posterCopyright="poster_copyright"}}
+</div>
+
+<aside class="order-4 col-full md:order-2 md:col-span-4"
+    aria-label='{{loca "appendix_title"}}'>
+    <div class="c-appendix">
+        {{#unless _webview}}
+            {{~#with this.backLinkUrl ~}}
+                {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
+            {{~/with~}}
+
+            {{~#with this.geotag ~}}
+                {{~> modules/geotag/geotag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.topictags ~}}
+                {{~> modules/topictag/topictag-list ~}}
+            {{~/with~}}
+
+            {{~#with this.socialSharing ~}}
+                {{~> modules/socialmedia/shareit ~}}
+            {{~/with~}}
+        {{/unless}}
+    </div>
+</aside>    
+</article>

package/dist/views_static/components/article/components/podcast/podcast_playlist-inline.hbs

@@ -0,0 +1 @@
+{{> components/podcast/podcast_playlist_player-inline }}

package/dist/views_static/components/article/components/podcast/podcast_playlist_all_episodes.hbs

@@ -0,0 +1,45 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player_all_episodes _isArticlePlayer=true}}      
+    </div>
+    <aside class="grid order-2 col-span-3" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

package/dist/views_static/components/article/components/podcast/podcast_playlist_article.hbs

@@ -0,0 +1,60 @@
+<article class="grid grid-page">
+    <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+        {{> components/podcast/podcast_playlist_player _isArticlePlayer=true}}
+
+        {{~#if this.remainingPlaylistItems}}
+            <div class="flex items-center justify-center pb-5 js-load"
+                 data-hr-podcast-channel-remaining-episodes-loader='{"dynLoadTrigSelector":".js-load-remaining-items-button","dynLoadReplaceSelector":".js-placeholder-reload", "url":"{{this.reloadUrl}}"}'>
+                {{#> components/button/link_button _size="lg" _title="Weitere Episoden laden" _type="button" _css="js-load-remaining-items-button" _link=this.allEpisodeUrl }}
+                    {{> components/button/components/button_label _label="Weitere Episoden laden"}}
+                    {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+                {{/components/button/link_button}}
+                {{#*inline "htmlProperties"}}
+                    data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "weitereEpisodenLaden:ButtonClick"}]}'
+                {{/inline}}
+            </div>
+            <div class="js-placeholder-reload"></div>
+        {{~/if~}}
+    </div>
+
+    <aside class="grid order-2 col-span-3 py-6" aria-label='{{loca "appendix_title"}}'>
+        <div class="c-appendix">
+            {{#unless _webview}}
+                {{~#with this.backLinkUrl ~}}
+                    {{~> base/link/backlink _addClass="appendix__backlink" ~}}
+                {{~/with~}}
+
+                {{~#with this.socialSharing ~}}
+                    {{~> modules/socialmedia/shareit ~}}
+                {{~/with~}}
+            {{/unless}}
+            {{~#with this.programReference~}}
+                {{~#if this.hasReference~}}
+                    <div class="appendix__entry">
+                        {{> modules/program_reference/program_reference }}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+            {{~#with this.appendixLinks~}}
+
+                <div class="appendix__entry">
+                    <div class="o-layout">
+                        <h4 class="appendix__headline text__headline">{{../this.appendixLinksTitle}}</h4>
+                        <ul class="list -appendix -vertical">
+                            {{#each this}}
+                                <li class="list__item -noIndent">
+                                    {{#decorator "base/link/link" _cssClasses="touchArea"}}
+                                        {{this.content.title}}{{~#if
+                                            this.hasIcon}}{{~> components/base/image/icon _icon=this.iconName _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if~}}
+                                    {{/decorator}}
+                                </li>
+                            {{/each}}
+                        </ul>
+                    </div>
+                </div>
+            {{~/with~}}
+        </div>
+    </aside>
+    </div>
+</article>

package/dist/views_static/components/podcast/components/podcast_player_shorttext.hbs

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 px-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
+          <div class="col-span-12 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/dist/views_static/components/podcast/podcast_playlist_player-inline.hbs

@@ -0,0 +1,22 @@
+{{~#with this.remainingPlaylistItems}}
+
+  <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}}
+        <div class="flex pb-5 {{#if @first}}pt-5 border-t border-white {{/if}}{{#unless @last}}border-white border-b{{/unless}}">
+          {{> components/podcast/components/podcast_player_ui
+            _isPlaylistPlayer=true
+            _podcastDuration=this.duration
+            _title=this.title
+            _id=(nextRandom)
+            _first=@first
+          }}
+        </div>
+      {{/each}}
+  </div>
+
+{{/with~}}

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

@@ -1,4 +1,4 @@
-<div class="flex col-span-12 pb-5 border-b border-white">
+<div class="flex w-full py-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}} ">
@@ -18,25 +18,17 @@
           {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
         </div>
 
-        {{!-- {{#switch this.realTeaserSize }}
-          {{#case "100"}}
-            {{> components/podcast/components/podcast_playlist_shorttext}}
-          {{/case}}
-        {{/switch}} --}}
-
         {{> components/podcast/components/podcast_playlist_shorttext}}
 
         {{!-- Abo-Dropdown --}}
         {{#if this.isSingleChannel}}
-          
             {{> components/podcast/components/podcast_subscribe_button}}
-          
         {{/if}} 
       </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", ""]'}}">
+        <div class="w-22 {{#if _isArticlePlayer}} md:w-32 lg:w-42{{else}}{{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}{{/if}} ">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
             _variant="default"
@@ -47,21 +39,11 @@
         </div>
       </div>
     </div>
-
-    {{!-- {{#switch this.realTeaserSize }}
-      {{#case "50"}}
-        <div class="flex flex-row w-full px-5 md:pl-5">
-          {{> components/podcast/components/podcast_playlist_shorttext}}
-        </div>
-      {{/case}}
-    {{/switch}} --}}
-    
-    
   </div>
 </div>
 
 {{!-- Player UI --}}
-<div  class="flex flex-col col-span-12 gap-5 px-5"
+<div  class="flex flex-col col-span-12 gap-5 px-5 {{#if _isArticlePlayer }}pt-5 {{/if}} "
   x-data="playaudio()" 
   x-init="listenToGlobalStop()" 
   ax-load 

package/dist/views_static/components/podcast/podcast_playlist_player_all_episodes.hbs

@@ -0,0 +1,65 @@
+<div class="flex w-full 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/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
+        </div>
+
+        {{> components/podcast/components/podcast_playlist_shorttext}}
+
+        {{!-- Abo-Dropdown --}}
+        {{#if this.isSingleChannel}}         
+            {{> components/podcast/components/podcast_subscribe_button}}
+        {{/if}} 
+      
+      </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>
+    
+  </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.allPlaylistItems}}
+      <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
+        {{> components/podcast/components/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.hbs

@@ -1,4 +1,4 @@
-<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-hr rounded-br-hr col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
+<div class="flex gap-y-6 relative gap-x-4 flex-col mx-5 sm:mx-0 bg-highlight-1 rounded-tl-hr rounded-br-hr col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
     {{> components/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
 </div>
 

package/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -5,6 +5,8 @@
     "anchor_sectionNav": "Bereichsnavigation anspringen",
     "anchor_serviceNav": "Servicenavigation anspringen",
     "anchor_subNav": "Subnavigation des Bereichs {0} anspringen",
+    "appendix_title": "Zusatzinformationen",
+    "appendix_links_title": "Weitere Hinweise",
     "archive_content": "Dieser Inhalt ist zeitlich unbegrenzt verfügbar.",
     "close_button_alpine_click": "avStart = false; $dispatch('player_closed',{playerId: {0}})",
     "play_button_alpine_click": "playAndStop({0});/* $dispatch('stopotherplayers',{playerId: {0}}) */",