hr-design-system-handlebars 0.67.2 → 0.68.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/build/handlebars/partials/handlebar-partials.js +10 -10
  3. package/dist/assets/index.css +6 -3
  4. package/dist/views/components/teaser/podcast/podcast_player.hbs +13 -20
  5. package/package.json +1 -1
  6. package/src/assets/fixtures/teaser/teasers.inc.json +21 -17
  7. package/src/stories/views/components/teaser/fixtures/teaser_podcast.json +1 -1
  8. package/src/stories/views/components/teaser/podcast/podcast_player.hbs +13 -20
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v0.68.0 (Thu Oct 20 2022)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - Dpe 1696 podcastplayer add podcasthoster via each block [#346](https://github.com/mumprod/hr-design-system-handlebars/pull/346) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
1
13
  # v0.67.2 (Thu Oct 20 2022)
2
14
 
3
15
  #### 🐛 Bug Fix
package/build/handlebars/partials/handlebar-partials.js CHANGED
@@ -19,14 +19,14 @@ module.exports['components/grid/grid_group_highlight.hbs'] = '</div>\n<div class
19
19
  module.exports['components/grid/grid_group_standard.hbs'] = '<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch _size \'["100","66","50","33","25"]\' \'["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]\'}}">\n {{> @partial-block }}\n</section>'
20
20
  module.exports['components/grid/grid_group_tabbed.hbs'] = '</div>\n<section class="grid grid-cols-12 px-8 py-8 mx-4 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">\n {{> @partial-block }}\n</section>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
21
21
  module.exports['components/grid/grid_item.hbs'] = '<article class="col-span-12 {{inline-switch _size \'["12","8","6","4","3"]\' \'["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]\'}}" >\n {{> @partial-block }} \n</article>'
22
- module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n {{#unless _hideGeotag}}\n {{~#with _geotag}}\n <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n {{/with~}}\n {{/unless}}\n</div>\n{{#if _isTeaser}}\n <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n {{#with _teaser}}\n {{~#if ../_isCopyText~}}\n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="ar__content" _noDelay=../_noDelay ~}} \n {{else}} \n {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n _clickLabelPrefix2="mediaLink" }} \n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../_noDelay ~}} \n {{/decorator }}\n {{/if}}\n {{/with}}\n {{> components/button/button_round _isButton="true" _addClass=(if _isLivestream \'absolute bottom-0 right-0 my-5 mx-5 text-orange-spicyCarrot hover:fill-orange-spicyCarrot js-mediaplayer__button\' \'absolute bottom-0 right-0 my-5 mx-5 text-blue-jellyBean hover:fill-blue-jellyBean js-mediaplayer__button\') _showIcon=true _icon=_mediaButtonIcon _label=_mediaButtonLabel _srOnly="true" _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"}} \n {{~#if this.isPodcast~}}\n <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n this.trackingData}}\n data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n </a>\n {{~/if~}}\n </div>\n{{/if}}'
23
22
  module.exports['components/label/label.hbs'] = '<span\n class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n {{inline-switch\n _type\n \'["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"]\'\n \'["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"]\'\n }}\'\n>\n {{_text}}\n</span>\n{{~#with this.byline~}}\n <span class=\'ml-2 text-xs text-grey-scorpion font-headingSerif\'>\n {{~#if this.bylineSsi~}}\n {{{this.bylineSsi}}}\n {{~else~}}\n {{this.bylineText}}\n {{~/if~}}\n </span>\n{{~/with~}}'
23
+ module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n {{#unless _hideGeotag}}\n {{~#with _geotag}}\n <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n {{/with~}}\n {{/unless}}\n</div>\n{{#if _isTeaser}}\n <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n {{#with _teaser}}\n {{~#if ../_isCopyText~}}\n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="ar__content" _noDelay=../_noDelay ~}} \n {{else}} \n {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n _clickLabelPrefix2="mediaLink" }} \n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _noDelay=../_noDelay ~}} \n {{/decorator }}\n {{/if}}\n {{/with}}\n {{> components/button/button_round _isButton="true" _addClass=(if _isLivestream \'absolute bottom-0 right-0 my-5 mx-5 text-orange-spicyCarrot hover:fill-orange-spicyCarrot js-mediaplayer__button\' \'absolute bottom-0 right-0 my-5 mx-5 text-blue-jellyBean hover:fill-blue-jellyBean js-mediaplayer__button\') _showIcon=true _icon=_mediaButtonIcon _label=_mediaButtonLabel _srOnly="true" _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"}} \n {{~#if this.isPodcast~}}\n <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n this.trackingData}}\n data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n </a>\n {{~/if~}}\n </div>\n{{/if}}'
24
24
  module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n class="no-js no-js-burgerMenu preload noMicroInteraction"\n data-theme="hessenschau" \n lang="de"\n>\n <head>\n\n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n <title>hessenschau.de | Nachrichten aus Hessen</title>\n <meta name="application-name" content="hessenschau.de" />\n <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n <meta name="publisher" content="hessenschau.de" />\n <meta name="language" content="Deutsch" />\n\n </head>\n\n <body itemscope itemtype="http://schema.org/WebPage">\n <div class="js-pageSwap">\n \n {{> components/site_header/header }} \n \n <main \n onclick="void(0)" \n role="main" \n id="content"\n class="flex items-center justify-center"\n >\n <div class="grid grid-page">\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard }}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div> \n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </div>\n <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div>\n \n </div>\n </main>\n\n </div>\n </body>\n</html>\n'
25
25
  module.exports['components/site_header/burger.hbs'] = '<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">\n <nav>\n <button {{!-- :class="$store.burgeropen ? \'text-blue-congress\' : \'text-white\'" --}} \n class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"\n @burger-close.window="burgerClose()"\n @click="$store.burgeropen = !$store.burgeropen" \n @click.debounce="burgerClick()" \n aria-owns="sectionNav" \n aria-controls="sectionNav"\n x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen);$el.setAttribute(\'aria-label\', $store.burgeropen ? \'Navigation schließen\' : \'Navigation öffnen\')"\n >\n <span class="sr-only md:hidden">Open main menu</span>\n <div class="absolute block w-6 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? \'rotate-45\' : \'-mt-2\'"></span>\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'opacity-0\': $store.burgeropen } "></span>\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'-rotate-45\': $store.burgeropen, \'mt-2\': ! $store.burgeropen }"></span>\n </div>\n </button>\n </nav>\n</div>\n\n<script>\n var burger = () => {\n return {\n burgerClose(){ \n this.$store.burgeropen = false\n this.$dispatch(\'toggle-sectionnav\', false); \n },\n burgerClick(){ \n this.$store.serviceNavIsOpen = false\n this.$dispatch(\'toggle-sectionnav\', this.$store.burgeropen); \n // Todo: not doing anything! can be removed?\n // this.percent > 50 ? this.removeYtranslate() : null;\n this.toggleScrolling(!this.$store.burgeropen) \n },\n removeYtranslate(){\n // Todo: not doing anything! can be removed?\n //this.$refs.serviceList.classList.remove(\'-mt-40\'); \n //this.$refs.sectionnavigation.classList.remove(\'-mt-40\')\n }\n }\n }\n</script>\n'
26
26
  module.exports['components/site_header/header.hbs'] = '<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">\n <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm"> \n <div x-data \n id="headerWrapper"\n @resize.window="resetNav()" \n :class="shouldBrandNavBeHidden() ? \'-mt-10 lg:-mt-8\' : \'\' "\n class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">\n \n <div id="anchorNavWrapper" \n class="hidden">\n {{> components/site_header/anchor_navigation/anchor_navigation }}\n </div>\n\n <div id="brandNavWrapper" \n class="relative flex items-center justify-center order-1 w-full bg-white z-10000">\n {{> components/site_header/brand_navigation/brand_navigation }} \n </div>\n\n <div id="serviceNavWrapper" \n :class="shouldServiceNavBeHidden() ? \'-mt-40\' : \'\'"\n \n class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002"> \n <div id="serviceNavMainContainer" \n class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">\n\n <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>\n\n <div id="serviceLogoWrapper" \n class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">\n {{> components/site_header/service_logo }}\n </div>\n \n <div id="serviceItemsWrapper" \n class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">\n {{> components/site_header/service_navigation/service_list }}\n\n {{> components/site_header/navigation_search/quick_search_button }}\n\n <div class="hidden lg:flex">\n {{> components/site_header/navigation_search/quick_search_form }}\n </div>\n \n <div id="burgerWrapper" \n class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> \n {{> components/site_header/burger }} \n </div>\n \n </div>\n </div>\n </div>\n\n <div id="sectionNavWrapper" \n x-ref="sectionnavigation"\n @toggle-sectionnav.window="toggleSectionNav"\n :class="shouldSectionNavBeHidden() ? \'-mt-40 md:-mt-40 lg:-mt-40\' : \'\'" \n class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"\n >\n {{> components/site_header/section_navigation/section_navigation }}\n </div>\n \n <div x-cloak :class="shouldServiceNavBeHidden() ? \'hidden -mt-40\' : \'\'"\n x-effect="$el.setAttribute(\'id\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-expanded\', $store.searchFieldOpen);$el.setAttribute(\'aria-hidden\', !$store.searchFieldOpen);$el.setAttribute(\'aria-labelledby\', \'flyout-\' + $store.searchID.current + \'-1\')" \n x-show="$store.searchFieldOpen"\n class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-10002 lg:hidden print:hidden"\n @search-close.window="$store.searchFieldOpen = false"\n @click.outside="$store.searchFieldOpen = false; $dispatch(\'search-mobile-click-outside\'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"\n x-transition:enter="transition ease-out duration-200" \n x-transition:enter-start="opacity-0 transform scale-y-90" \n x-transition:enter-end="opacity-100 transform scale-y-100" \n x-transition:leave="transition ease-in duration-100" \n x-transition:leave-start="opacity-100 transform scale-y-100" \n x-transition:leave-end="opacity-0 transform scale-y-90">\n\n {{> components/site_header/navigation_search/quick_search_form }}\n\n </div>\n \n </div> \n </header>\n <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">\n <img loading="lazy" \n alt="{{loca "header_homepage_link_title"}}" \n src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" \n />\n </div>\n <div x-ref="myOverlay">\n <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-10000 lg:hidden opacity-70"></div>\n </div>\n</div>\n'
27
27
  module.exports['components/site_header/service_logo.hbs'] = '<a class="relative flex items-center text-white fill-current sb-service-logo lg:items-end link-focus-white print:hidden" \n href="https://www.hessenschau.de/index.html" \n title="Startseite hessenschau . d e">\n <span x-cloak class="absolute transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-0\' : \'delay-200 opacity-100\'" >\n {{> components/base/image/icon _icon="brandlogo--compact-40x40px" _iconmap="logo" _addClass="logo-compact w-7 h-7 lg:w-10 lg:h-10 items-center "}}\n </span>\n <span class="transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? \'opacity-100\' : \'opacity-0\'">\n {{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="logo-desk flex items-center fill-white w-40 h-5 md:h-7 md:w-40 lg:h-8 lg:w-52"}}\n </span> \n</a>\n'
28
28
  module.exports['components/teaser/teaser_alternativ.hbs'] = '<article class="col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]\'~}}{{else}} items-start flex-col{{/unless}}"\n x-data="{ avStart: false }"\n {{#if this.isMobile1to1}}\n :class="avStart ? \'flex-col\' : \'flex-row\'"\n {{/if}} \n >\n <figure class="relative {{~inline-switch this.teaserSize \'["hero","100","50"]\' \'[" basis-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 md:basis-1/3"," ar-1-1 md-ar-16-9 basis-2/5 md:basis-1/2"]\'~}}">\n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["hero"]\' \'["ar-16-9","ar-1-1 md:ar-16-9"]\') }} \n </figure>\n {{> components/teaser/components/teaser_body _outerCssClasses=(inline-switch this.teaserSize \'["hero","100","50"]\' \'["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]\') }}\n</article>'
29
- module.exports['components/teaser/teaser_poster.hbs'] = '<article class="mx-5 md: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"]\'}} ">\n <figure class="ar-1-1" aria-hidden="true">\n {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}\n </figure> \n <div class="absolute flex justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">\n <div class="self-center block mx-8 text-center text-white">\n {{> components/teaser/components/teaser_heading _headlineTag="h2" _label=this.label _readMore=this.link.readMoreText.readMoreScreenreader _size=this.teaserSize _title=this.title _topline=this.topline _teaserType=this.teaserType _font=(inline-switch isSerifHeading \'[true, false]\' \'["font-headingSerif","font-heading font-bold"]\') }} \n </div>\n </div>\n {{#decorator \'components/base/link\' _css="absolute flex w-full h-full justify-center" _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}\n <div class="self-end {{inline-switch this.teaserSize \'["33","50"]\' \'["mb-8 px-2","mb-8 md:mb-16 px-4 py-2.5"]\'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>\n {{/decorator}} \n <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> \n</article>'
29
+ module.exports['components/teaser/teaser_poster.hbs'] = '<article class="mx-5 md: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"]\'}} ">\n <figure class="ar-1-1" aria-hidden="true">\n {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}\n </figure> \n <div class="absolute flex justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">\n <div class="self-center block mx-8 text-center text-white">\n {{> components/teaser/components/teaser_heading _headlineTag="h2" _label=this.label _readMore=this.link.readMoreText.readMoreScreenreader _size=this.teaserSize _title=this.title _topline=this.topline _teaserType=this.teaserType _font=(inline-switch isSerifHeading \'[true, false]\' \'["font-headingSerif","font-heading font-bold"]\') }} \n </div>\n </div>\n {{#decorator \'components/base/link\' _css="absolute flex w-full h-full justify-center" _isAriaHidden=true _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}\n <div class="self-end px-4 py-2.5 {{inline-switch this.teaserSize \'["33","50"]\' \'["mb-7","mb-7 md:mb-16"]\'}} text-white border border-white font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor">{{this.link.readMoreText.readMoreLong}}</div>\n {{/decorator}} \n <span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span> \n</article>'
30
30
  module.exports['components/teaser/teaser_standard.hbs'] = '<article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay \'\' \'gap-y-3\'}} gap-x-4 \n{{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}}\n{{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} \n "\n x-data="{ avStart: false }"\n {{#if this.isMobile1to1}}\n :class="avStart ? \'flex-col\' : \'flex-row\'"\n {{/if}} \n >\n <figure class="relative \n {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"> \n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }} \n </figure>\n {{#if this.displayTeaserBodyAsImageOverlay}}\n {{#decorator \'components/teaser/components/teaser_image_overlay\' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}\n <div class="flex flex-col items-center justify-center p-4 border-dashed border-r border-gray-400">\n {{> components/event/instant_dates}}\n </div>\n {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 \'py-4 md:px-4 basis-3/5 md:flex-full\' \'py-4 md:px-4\')}}\n {{/decorator}}\n {{else}}\n {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 \'basis-3/5 md:flex-full\')}}\n {{/if}}\n</article>'
31
31
  module.exports['components/teaser/teaser_standard_event.hbs'] = '<article class="col-span-12 flex gap-y-3 gap-x-4 \n {{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}}\n {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} \n "\n x-data="{ avStart: false }"\n {{#if this.isMobile1to1}}\n :class="avStart ? \'flex-col\' : \'flex-row\'"\n {{/if}} \n >\n \n {{#if this.isEvent}}\n {{! ---- To handle two events ----}}\n {{#if this.moreThenOneEvent}}\n <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n <figure class="relative \n {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"> \n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }} \n </figure>\n <div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white\n {{inline-switch teaserSize \'["100"]\' \'["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]\'}}" \n aria-hidden="true">\n <div class="self-center block mx-4 text-center text-black">\n <span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day}}</span>\n <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}}</span>\n +<br>\n <span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day}}</span>\n <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort}} </span>\n </div>\n <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}\n {{inline-switch teaserSize \'["100"]\' \'["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]\'}}\n {{inline-switch teaserSize \'["50","33"]\' \'[" hidden"," hidden"]\'}}">\n <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{#decorator \'components/base/link\' css="hover:text-toplineColor" }} \n {{> components/teaser/components/teaser_heading \n fontVariant=this.headingFontVariant\n headlineTag=this.headlineTag \n label=this.label \n readMore=this.link.readMoreText.readMoreScreenreader \n size=this.teaserSize \n title=this.title \n topline=this.topline \n teaserType=this.teaserType\n _isMobile1to1=this.isMobile1to1}} \n {{/decorator}} \n </header>\n <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}\n </section>\n </div>\n </div>\n </article>\n {{else if this.moreThenTwoEvents}}\n {{! ---- To handle more than two events ----}}\n <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n <figure class="relative \n {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"> \n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }} \n </figure>\n <div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white" aria-hidden="true">\n <div class="self-center block mx-4 text-center text-black">\n <span class="text-xl font-headingSerif font-bold">{{ this.firstInstant.startDate.day }} </span>\n <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>\n |<br>\n <span class="text-xl font-headingSerif font-bold">{{this.lastInstant.startDate.day }} </span>\n <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>\n </div>\n </div>\n </article>\n {{else}}\n {{! ---- To handle a single event ----}}\n <article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-4 gap-x-4 {{inline-switch teaserSize \'["33","50"]\' \'["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]\'}} ">\n <figure class="relative \n {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"> \n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }} \n </figure>\n <div class="absolute flex justify-center w-16 h-full bg-gradient-to-t from-white\n {{inline-switch teaserSize \'["100"]\' \'["bottom-0 w-full h-2/5 bg-neutral-200 opacity-80"]\'}}" \n aria-hidden="true">\n <div class="self-center block mx-4 text-center text-black">\n <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.weekdayNameShort }} </span>\n <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.day }} </span>\n <span class="text-xl font-headingSerif">{{this.lastInstant.startDate.monthNameShort }} </span>\n </div>\n <div class=" {{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}\n {{inline-switch teaserSize \'["100"]\' \'["border-l-2 border-dotted pt-5 pl-4 border-slate-600"]\'}}\n {{inline-switch teaserSize \'["50","33"]\' \'[" hidden"," hidden"]\'}}">\n <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{#decorator \'components/base/link\' _css="hover:text-toplineColor" }} \n {{> components/teaser/components/teaser_heading \n fontVariant=this.headingFontVariant\n headlineTag=this.headlineTag \n label=this.label \n readMore=this.link.readMoreText.readMoreScreenreader \n size=this.teaserSize \n title=this.title \n topline=this.topline \n teaserType=this.teaserType\n _isMobile1to1=this.isMobile1to1}} \n {{/decorator}} \n </header>\n <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}\n </section>\n </div>\n </div>\n </article>\n {{/if}}\n {{else}}\n <figure class="relative \n {{~#if this.isMobile1to1}} basis-2/5 md:flex-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"> \n {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize \'["25"]\' \'["ar-1-1 md:ar-16-9", "ar-16-9"]\') }} \n </figure>\n {{/if}} \n <div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{inline-switch teaserSize \'["100"]\' \'[" hidden"]\'}}">\n <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{#decorator \'components/base/link\' _css="hover:text-toplineColor" }} \n {{> components/teaser/components/teaser_heading \n fontVariant=this.headingFontVariant\n headlineTag=this.headlineTag \n label=this.label \n readMore=this.link.readMoreText.readMoreScreenreader \n size=this.teaserSize \n title=this.title \n topline=this.topline \n teaserType=this.teaserType\n _isMobile1to1=this.isMobile1to1}} \n {{/decorator}} \n </header>\n <section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}\n </section>\n </div>\n</article>'
32
32
  module.exports['components/base/image/icon.hbs'] = '{{!--@\nFügt ein SVG-basiertes Icon ein.\nDas Icon wird aus einer SVG-SpriteMap bezogen.\n\n```hbs\n{{> base/image/icon\n _icon="..."\n _addClass="..."\n _areHidden=[false|true*]\n _iconTitle=""\n _iconDesc=""\n _iconmap=\n\n }}\n```\n\n`_icon` Name des Icons, das dargestellt werden soll. Entspricht der ID in der SVG-SpriteMap.\n Diese ergibt sich durch den Dateinamen des ursprünglichen SVG-Icons.\n *!!! Ohne Angabe eines Icon-Namens wird kein Markup erzeugt !!!*<br>\n`_addClass` Möglichkeit zur Angabe einer zusätzlichen CSS-Klasse. `icon` ist Standard.<br>\n`_ariaHidden` default true\n`_iconTitle` Title Element für SVG inklusive Aria Verknüpfung\n`_iconDesc` Description für SVG inklusive Aria Verknüpfung. Ohne iconTitle wird iconDesc nicht ausgespielt\n`_iconmap` Benennt das Unterverzeichnis, unter dem nach der SVG-SpriteMap gesucht wird.\n Die SVG-SpriteMap hat immer den Namen "svgmap.min.svg".\n Default ist `icons` (entspricht dem Standard-Icon-Set)<br>\n`_overlayIcon` Erlaubt die Angabe eines zweiten Icon-Names, der über das erste gelegt wird.\n Es wird davon ausgegangen, das das Overlay sich in der gleichen SVG-SpriteMap befindet.<br>\n\nBeispielaufruf:\n```hbs\n{{> base/image/icon _icon="arrow-up"}}\n```\n\nTODOs zu einem späteren Zeitpunkt:\n\nErklärung / Hinweise / Best Practices für "Accessible SVG":\n- http://www.sitepoint.com/tips-accessible-svg/\n- http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/\n\n--}}\n{{#if _icon}}\n<svg class="sb-icon {{~#if _addClass }} {{_addClass}}{{/if}} {{#if _webview}} -webview{{/if}}" role="presentation" aria-hidden="{{defaultIfEmpty _ariaHidden true}}"\n{{# if brand}} data-brand="{{brand}}"{{/if}}\n {{~#if _iconTitle }} {{changeRandom~}}\n aria-labelledby="iconTitle--{{getRandom}}"\n {{~#if _iconDesc }} aria-describedby="iconDesc--{{getRandom}}"{{~/if~}}\n {{~/if~}}>\n\n {{~#if _iconTitle ~}}\n <title id="iconTitle--{{getRandom}}">{{_iconTitle}}</title>\n {{~#if _iconDesc ~}}\n <description id="iconDesc--{{getRandom}}">{{_iconDesc}}</description>\n {{~/if~}}\n {{~/if~}}\n\n {{~#if _iconText ~}}\n <g>\n <svg>\n {{~/if~}}\n\n <use xlink:href="{{resourceUrl (replaceTokens "assets/base/icons/{0}/svgmap.min.svg" (defaultIfEmpty _iconmap "icons") ) _brand=(if this.brand this.brand)}}#{{_icon}}"></use>\n {{#if _overlayIcon }}\n <use xlink:href="{{resourceUrl (replaceTokens "assets/base/icons/{0}/svgmap.min.svg" (defaultIfEmpty _iconmap "icons") ) _brand=(if this.brand this.brand)}}#{{_overlayIcon}}"></use>\n {{/if}}\n {{~#if _iconText ~}}\n </svg>\n </g>\n <text dy="0.35em" y="50%" x="50%">{{_iconText}}</text>\n {{~/if~}}\n</svg>\n{{~/if}}'
@@ -42,12 +42,6 @@ module.exports['components/site_header/navigation_search/quick_search_button.hbs
42
42
  module.exports['components/site_header/navigation_search/quick_search_form.hbs'] = '<form \n x-data="searchSuggest()"\n role="search" \n action="{{resourceUrl "suche/index.nocache"}}" \n method="get" \n class="flex w-full sb-quick-search-form md:justify-end lg:h-10"\n>\n <div \n class="relative w-full lg:rounded-l" \n id="search-content"\n @click.away="active=false; cursorIndex=-1"\n @keydown.arrow-down="moveDownList()"\n @keydown.arrow-up="moveUpList()"\n > \n <label for="searchInput--{{nextRandom}}" class="hidden">suchfeld</label>\n <input \n @input.debounce="getSuggestionsForInput();cursorIndex=-1"\n @click="active=true" \n name="query" \n x-model="query"\n placeholder=\'{{loca "search_input_placeholder" }}\' \n class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-blue-congress lg:h-10 placeholder-text-xs placeholder-blue-congress text-blue-congress focus:outline-none"\n type="text"\n id="searchInput--{{getRandom}}"\n autocomplete="off"\n role="combobox" \n aria-haspopup="listbox" \n aria-autocomplete="list" \n x-effect="$el.setAttribute(\'aria-expanded\', (query.length > 1 && active && suggestions.length > 0))"\n aria-owns="suggestionlist--{{getRandom}}"\n aria-controls="suggestionlist--{{getRandom}}"\n > \n <div \n class="relative" \n x-show="query.length > 1 && active && suggestions.length"\n x-cloak\n x-transition:leave="transition ease-in duration-100"\n x-transition:leave-start="opacity-100"\n x-transition:leave-end="opacity-0"\n >\n <ul \n role="listbox" \n id="suggestionlist--{{getRandom}}" \n aria-label="Suche öffnen"\n x-effect="$el.setAttribute(\'aria-expanded\', query.length > 1 && active && suggestions.length > 0);$el.setAttribute(\'aria-hidden\', !(query.length > 1 && active && suggestions.length > 0))"\n class="absolute w-full mt-0.5 bg-white border rounded divide-y shadow-xl top-100"\n x-ref="list"\n >\n \n <template x-for="(suggestion, index) in suggestions" :key="index">\n <li class="first-of-type:border-none">\n <a \n x-bind:active="false"\n x-bind:href="\'{{resourceUrl "suche/index.nocache"}}?query=\' + suggestion"\n x-bind:class="{\'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-blue-congress hover:text-white\': true, \'bg-blue-congress text-white\':index==cursorIndex }"\n >\n <span x-text="suggestion"></span>\n </a>\n </li>\n </template>\n \n </ul>\n </div> \n </div>\n <button \n aria-label=\'{{loca "search_input_aria_submit" }}\' \n type="submit" \n class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-10002"\n >\n <svg class="w-6 h-6 text-white fill-current bg-blue-congress lg:fill-current lg:text-blue-congress lg:bg-white" \n xmlns="http://www.w3.org/2000/svg" \n viewBox="0 0 20 20"\n aria-hidden="true"\n >\n <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>\n </svg>\n </button>\n</form>\n\n<script type="text/javascript">\n\n function searchSuggest() {\n\n return {\n active:true,\n cursorIndex: -1,\n query: "",\n suggestions: [],\n\n getSuggestionsForInput() {\n\n suggestionDataUrl = \'{{resourceUrl "suche/index~suggest.jsp"}}\' + \'?suggestions=\' + this.query;\n\n fetch(suggestionDataUrl)\n\n .then((res) =>{ return res.text()})\n\n .then((data) => {\n data = JSON.parse(data.replace(/&quot;/g, \'"\'))\n data.solrSuggestions = this.filterStartwith(data.solrSuggestions, this.query)\n this.suggestions= this.filterSortbylength(data.solrSuggestions)\n });\n\n },\n\n filterStartwith(data, query) {\n return data.filter(Suggestion => Suggestion.toLowerCase().startsWith(query.toLowerCase().trim()))\n },\n\n filterSortbylength(data) {\n return data.sort((a, b) => a.length - b.length)\n },\n\n moveDownList() {\n if (this.suggestions.length > 0 && this.cursorIndex < this.suggestions.length - 1) \n {\n this.cursorIndex++;\n this.query = this.suggestions[this.cursorIndex];\n }\n },\n\n moveUpList() {\n if (this.suggestions.length > 0 && this.cursorIndex > 0) \n {\n this.cursorIndex--;\n this.query = this.suggestions[this.cursorIndex];\n }\n },\n\n };\n\n }\n\n</script>'
43
43
  module.exports['components/site_header/section_navigation/section_navigation.hbs'] = '<div \n id="sectionNav"\n class="w-full px-0 mt-10 sb-section-navigation md:mt-0 lg:px-10 lg:container bg-blue-congress" \n x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen || $screen(\'lg\')); $el.setAttribute(\'aria-hidden\', ! ($store.burgeropen || $screen(\'lg\')))"\n>\n <div class="flex content-start mb-0">\n <div class="flex w-full">\n <span id="sectionNavHeadline" class="hidden">Bereichsnavigation</span>\n {{#with this.sectionNavigationSSILinks}}\n <ul class="flex flex-col items-center w-full text-left text-white list-none lg:flex-row lg:h-auto lg:mt-1">\n {{#each this}} \n {{#if (isStorybook)}} \n {{> components/site_header/section_navigation/section_navigation_item }} \n {{else}}\n {{{this}}}\n {{/if}}\n {{/each}} \n </ul>\n {{/with}}\n </div>\n </div>\n</div> '
44
44
  module.exports['components/site_header/section_navigation/section_navigation_item.hbs'] = '{{#each this.navigationItems}}\n <li x-data="dropdown"\n @click.outside="dropped = false" \n @close-servicemenu.window="dropped = false" \n :class="dropped ? \'border-b-0 lg:bg-white lg:text-blue-congress h-auto\' : \'h-10 lg:hover:underline\'" \n class="flex flex-wrap justify-start w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t"> \n {{#if this.isCluster ~}}\n{{!-- Gilt z.B. für REGIONEN: --}} \n <button id="button-{{nextRandom}}-1" \n @click.debounce.100ms="toggle()" \n :class="dropped ? \'first:font-bold lg:first:font-normal lg:underline\' : \'first:font-normal\'"\n class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4 {{#if this.selected}} font-bold{{/if}}" \n x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'tabindex\', $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n aria-owns="flyout-{{getRandom}}" \n aria-controls="flyout-{{getRandom}}" \n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}\'>\n\n {{~else ~}}\n\n {{#if this.subNavigation}}\n{{!-- Gilt z.B. für POLITIK: --}}\n <a href="{{resourceUrl this.url}}" \n id="flyout-{{nextRandom}}-1"\n \n :class="dropped ? \'font-bold\' : \'\'"\n class="{{#if this.selected}}-currentSection lg:justify-center {{/if}}link-focus-inset-white js-load pl-4 pr-8 lg:pl-4 lg:pr-4 flex flex-auto h-10 items-center leading-4 lg:w-full lg:justify-center{{#if this.selected}} font-bold{{/if}}"\n {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} \n aria-haspopup="true" \n x-effect="$el.setAttribute(\'aria-expanded\', dropped || $screen(\'lg\'));$el.setAttribute(\'tabindex\', $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n aria-owns="flyout-{{getRandom}}"\n aria-controls="flyout-{{getRandom}}"\n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}\'> \n {{~else ~}} \n{{!-- Gilt für START/GESELLSCHAFT/WIRTSCHAFT usw: --}}\n <a href="{{resourceUrl this.url}}" \n class="{{#if this.selected}}-currentSection lg:justify-center {{/if}} link-focus-inset-white js-load flex justify-start pl-4 pr-4 h-10 lg:justify-center items-center w-full{{#if this.selected}} font-bold{{/if}}" \n {{#if this.labelText}} aria-label="{{this.labelText}}"{{/if}} \n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Link geklickt"}]}\'\n x-effect="$el.setAttribute(\'tabindex\', $store.burgeropen || $screen(\'lg\') ? \'0\' : \'-1\')"\n >\n {{~/if}}\n\n {{~/if }}\n\n {{#if this.subNavigation}}\n\n {{~this.text~}}\n \n {{#if this.subNavigation.showAsFlyout ~}}\n \n <div class="flex items-center justify-center w-10 h-10 leading-4 lg:w-auto lg:border-0 lg:pl-1">\n <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\'">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </div>\n </div>\n \n {{/if}}\n\n {{else}}\n\n {{~this.text~}}\n\n {{~/if}}\n\n {{#if this.isCluster}}\n\n </button>\n\n {{else}}\n\n </a>\n\n {{#if this.subNavigation}}\n\n <button \n @click.debounce.100ms="toggle()" \n id="button-{{getRandom}}-1" \n class="flex items-center justify-center w-10 h-10 leading-4 border-l border-white js-load lg:hidden" \n aria-haspopup="true" \n x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'tabindex\', $store.burgeropen ? \'0\' : \'-1\')"\n aria-owns="flyout-{{getRandom}}" \n aria-controls="flyout-{{getRandom}}" \n aria-labelledby="flyout-{{getRandom}}-1" \n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Rubriknavigation::{{this.text}}-Toggle-Link geklickt"}]}\'>\n\n <span class="hidden">{{~this.text~}}</span>\n \n <div class="flex items-center justify-center lg:ml-2 lg:relative lg:right-0" :class="dropped ? \'transform rotate-180 \':\'\'">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}\n </div>\n </button>\n\n {{/if}}\n\n {{/if}}\n \n {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=true _navigationType="RubrikNavigation" _parent=this.text }}\n\n </li>\n{{/each}}'
45
- module.exports['components/site_header/service_navigation/service_list.hbs'] = '<div \n id="serviceList"\n @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"\n x-ref="serviceList"\n :class="shouldServiceIconsBeHidden() ? \'-mt-40\' : \'\'"\n class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "\n>\n {{#with this.serviceNavigationSSILinks}}\n <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">\n {{#each this}} \n {{> components/base/loadSSI _templatePath=\'components/site_header/service_navigation/service_navigation_item\' }} \n {{/each}} \n </ul>\n {{/with}}\n</div>'
46
- module.exports['components/site_header/service_navigation/service_navigation_item.hbs'] = '{{#each this.navigationItems}}\n <li class="sb-service-navigation-item {{inline-switch this.id \'["weather","warnung","traffic","video-podcast"]\' \'["-weather", "-warnung", "-traffic", "-video-podcast"]\' }} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-white" >\n {{#if this.subNavigation}} \n <button \n id="{{nextRandom}}" \n @click.debounce.100ms="toggleServiceNav()" \n @click.outside="dropped = false;"\n @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"\n\n x-data="dropdown"\n id="{{getRandom}}"\n \n class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"\n\n :class="dropped ? \'bg-white fill-current text-blue-congress lg:border-0 lg:underline\' : \'\'" \n\n aria-owns="flyout-{{getRandom}}" \n aria-controls="flyout-{{getRandom}}"\n x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'aria-label\', dropped ? \'{{this.text}}-Menü schließen\' : \'{{this.text}}-Menü öffnen\')"\n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'\n >\n \n {{else}}\n\n {{#if this.extern}}\n <a href="{{this.url}}" target="_blank" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n {{else}}\n <a href="{{resourceUrl this.url}}" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:pt-1 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n {{/if}}\n\n {{/if}}\n\n <div class="w-7 md:w-8 h-7 md:h-8" >\n {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full"}}\n <span class="sr-only lg:hidden">{{this.text}}</span>\n </div>\n\n <div :class="dropped ? \'text-blue-congress fill-current\' : \'text-white fill-white\'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">\n <div class="flex" >\n <span class="flex text-xs leading-4 whitespace-nowrap">\n {{text}} \n </span>\n {{#if this.subNavigation}} \n <div class="flex lg:pl-1">\n <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\' ">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </div>\n </div>\n {{/if}} \n </div>\n </div> \n {{#if this.subNavigation}} \n {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=false _navigationType="ServiceNavigation" _parent=this.text }}\n </button>\n {{else}} \n </a>\n {{/if}} \n </li>\n{{/each}}'
47
- module.exports['components/teaser/cluster/teaser_cluster.hbs'] = '<article class="mx-5 md:mx-0 col-span-12 grid bg-[#dce8f0] rounded-tl-3xl rounded-br-3xl {{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}} ">\n <div class="">\n <h2 class="flex items-center px-5 py-6 font-bold font-headingSerif text-blue-congress">\n {{#if this.teaserLogo}}\n <span>\n {{> components/base/image/icon _icon=this.teaserLogo _iconmap="logo" _addClass=(inline-switch this.teaserLogo \'["hessenschau_de"]\' \'["fill-[#005293] w-10 md:w-12 h-10 md:h-12","fill-[#005293] w-40 lg:w-52 h-8 md:h-12"]\')}}\n </span>\n {{/if}}\n {{#if this.title}}\n <span class="text-lg md:text-2xl border-blue-congress {{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}">{{this.title}}</span>\n {{/if}}\n </h2>\n {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} \n </div>\n {{~#with this.headlineListOverview}}\n {{~#if this.link~}}\n <div class="flex mx-5 py-11 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" justify-center md:justify-end"," justify-center"]\'}}">\n {{~> components/button/button_pseudo _color="blue" _linkTitle=this.title~}}\n </div>\n {{~/if~}}\n {{/with~}}\n</article>\n\n'
48
- module.exports['components/teaser/cluster/teaser_cluster_byline.hbs'] = '\n<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">\n {{!--Teaser-Info--}}\n {{#with this.teaserInfo}}\n {{#if this.showTeaserInfo~}}\n {{~#if this.showTeaserInfoSection}}\n <span class="uppercase">\n {{../this.documentSection~}}\n </span>\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if}}\n {{~#if this.showTeaserInfoDate}}\n {{~#with ../this.teaserDate}}\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n {{/with~}}\n <span class="mx-px last-of-type:hidden">|</span>\n {{else}}\n {{~#if this.showTeaserInfoDateTime}}\n {{~#with ../this.teaserDate}}\n <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>\n {{/with~}}\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if~}}\n {{/if~}}\n {{/if}}\n {{/with}}\n\n {{!--Profiles--}}\n {{#if this.showProfileInfoAsByline}}\n {{#if this.profiles}}\n <span>{{this.profiles}}</span>\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if}}\n {{/if}}\n</p>'
49
- module.exports['components/teaser/cluster/teaser_cluster_item.hbs'] = '\n{{#decorator \'components/base/link\' _css="group" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} \n {{> components/teaser/components/teaser_heading\n _headlineTag="h1"\n _label=this.label\n _size=_size\n _title=this.title\n _teaserType="cluster"\n _ordered=_ordered\n _titleBlue=\'true\' \n _firstItem=_firstItem}} \n {{/decorator}}\n{{> components/teaser/cluster/teaser_cluster_byline}}\n \n'
50
- module.exports['components/teaser/cluster/teaser_cluster_list.hbs'] = '<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize \'["100"]\' \'[" md:flex md:flex-row"]\'}}{{~/if~}}">\n {{~#if this.showGenreImage}}\n <div class="px-0 pb-5 {{~inline-switch this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]\'}}">\n {{~> components/base/image/responsive_image this.genreImage type=this.teaserType variant=this.imageVariant addClass=this.aspectRatio _addClassImg="ar__content" ~}}\n </div>\n {{~/if~}}\n {{~#if this.showFirstImage}}\n {{~#with this.firstEntry~}}\n {{~#if this.teaserImage}}\n <div class="px-0 pb-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3"]\'}}"> \n {{~> components/base/image/responsive_image this.teaserImage type=../this.teaserType variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content pb-4" ~}}\n <div class="mx-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:mx-0"]\'}}">\n {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _firstItem=true}}\n </div> \n </div> \n {{/if~}}\n {{~/with~}}\n {{/if~}}\n {{~#with this.clusterTeaserItems}}\n {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{/if}}\n {{~#each this~}}\n <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-5 {{#if ../../this.headlineListOverview.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize \'["100"]\' \'[" md:first-of-type:pt-0"]\'}}{{/if~}}">\n {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../this.isOrdered }} \n </li>\n {{~/each}}\n {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}\n {{/with~}}\n</div>'
51
45
  module.exports['components/teaser/components/teaser_av_consumption.hbs'] = '{{#with this.teaserLead.avDocument}}\n {{~#if this.isVideo ~}}\n {{#with this.toModel.videoElement}}\n {{~> components/mediaplayer/media_player _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../../this _aspectRatio=../../_aspectRatio _teaserSize=../../_teaserSize ~}}\n {{#if ../../_isMobile1to1~}} \n {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n {{~/if~}}\n {{/with}}\n {{~/if~}}\n {{~#if this.isAudio ~}}\n {{#with this.toModel.audioElement}}\n {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="audio_button" _mediaButtonLabel="Audio" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}} \n {{#if ../../_isMobile1to1~}} \n {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n {{~/if~}}\n {{/with}}\n {{~/if~}}\n {{~#if this.isPodcast ~}}\n {{#with this.toModel.audioElement}}\n {{~> components/mediaplayer/media_player _cypressHook="js-audio-ondemand" _mediaButtonIcon="podcast-button" _mediaButtonLabel="Podcast" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}} \n {{#if ../../_isMobile1to1~}} \n {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n {{~/if~}}\n {{/with}}\n {{~/if~}}\n {{~#if this.isAudioEventLivestream ~}}\n {{#with this.toModel.audioLivestreamElement}}\n {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize~}} \n {{#if ../../_isMobile1to1~}} \n {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n {{~/if~}}\n {{/with}}\n {{~/if~}}\n {{~#if this.isLivestream ~}}\n {{#with this.toModel.videoLivestreamElement}}\n {{~> components/mediaplayer/media_player _cypressHook="js-video-livestream" _mediaButtonIcon="play_button" _mediaButtonLabel="Live" _isLivestream="true" _isTeaser=true _teaser=../../this _audioUrl=../this.audioUrl _variant=../this.imageVariant _noDelay=../../_noDelay _aspectRatio=../../_aspectRatio _isMobile1to1=../../_isMobile1to1 _teaserSize=../../_teaserSize ~}} \n {{#if ../../_isMobile1to1~}} \n {{> components/teaser/components/teaser_av_consumption_close_button _playerId=this.ardPlayerConfig.playerId }}\n {{~/if~}}\n {{/with}}\n {{~/if~}}\n \n{{/with}}'
52
46
  module.exports['components/teaser/components/teaser_av_consumption_close_button.hbs'] = '{{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}'
53
47
  module.exports['components/teaser/components/teaser_body.hbs'] = '<div class="{{~#if this.isMobile1to1}}basis-3/5 md:flex-full{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">\n <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{#decorator \'components/base/link\' _css="hover:text-toplineColor" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }} \n {{> components/teaser/components/teaser_heading \n _fontVariant=this.headingFontVariant\n _headlineTag=this.headlineTag \n _label=this.label \n _readMore=this.link.readMoreText.readMoreScreenreader \n _size=this.teaserSize \n _title=this.title \n _topline=this.topline \n _teaserType=this.teaserType\n _isMobile1to1=this.isMobile1to1}} \n {{/decorator}} \n </header>\n <div class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">\n {{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize _cssClasses=_teaserTextCssClasses }}\n {{> components/teaser/components/teaser_byline}} \n </div>\n</div>'
@@ -61,16 +55,22 @@ module.exports['components/teaser/components/teaser_text.hbs'] = '<span\n cla
61
55
  module.exports['components/teaser/components/teaser_title.hbs'] = '<span class=\'block mt-0.5 group-hover:underline {{#if _titleBlue}} text-blue-congress {{/if}}{{#if _ordered}} pl-8 {{/if}} {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}\'>\n {{~_text~}}\n</span>'
62
56
  module.exports['components/teaser/components/teaser_title_classes.hbs'] = '{{! \nThis handlebars template is responisible to render the needed classnames for Teaser headlines\nAs we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent\non 4 parameters the logic was outsourced to this file.\n\nthe 4 parameters are:\n- teaserType\n- size\n- _isMobile1to1\n- fontVariant\n\n}}\n\n{{~#switch _teaserType~}}\n {{~#case \'standard-ds\'~}}\n {{~#if _isMobile1to1~}}\n {{~inline-switch\n _size\n \'["hero","100","25"]\'\n \'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]\'\n ~}}\n {{~else~}}\n {{~inline-switch\n _size\n \'["hero","100","25"]\'\n \'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]\'\n ~}}\n {{~/if~}}\n {{~/case~}}\n {{~#case \'alternative-ds\'~}}\n {{~inline-switch\n _size\n \'["hero","100","50"]\'\n \'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]\'\n ~}}\n {{~/case~}}\n {{~#case \'poster-ds\'~}}\n {{~inline-switch _size \'["50","33"]\' \'["text-2xl md:text-4xl","text-2xl"]\'~}}\n {{~/case~}}\n {{~#case \'cluster\'~}}\n {{#if _firstItem}}\n {{~inline-switch _size \'["100"]\' \'[" text-lg md:text-2xl"," text-lg"]\'}}\n {{else}}\n text-lg \n {{/if}}\n {{~/case~}}\n{{~/switch~}}\n{{~inline-switch\n _fontVariant\n \'["serif", "sans-serif"]\'\n \'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]\'\n~}}'
63
57
  module.exports['components/teaser/components/teaser_topline.hbs'] = '<span\n class=\'pt-px block text-base\n {{inline-switch _teaserType \'["poster-ds"]\' \'["text-white","text-toplineColor"]\'}}\n font-heading\'\n aria-label=\'{{_readMore}}: {{_text}}\'\n>\n {{_text}}\n</span>'
58
+ module.exports['components/teaser/cluster/teaser_cluster.hbs'] = '<article class="mx-5 md:mx-0 col-span-12 grid bg-[#dce8f0] rounded-tl-3xl rounded-br-3xl {{~inline-switch this.teaserSize \'["25","33","50"]\' \'[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]\'}} ">\n <div class="">\n <h2 class="flex items-center px-5 py-6 font-bold font-headingSerif text-blue-congress">\n {{#if this.teaserLogo}}\n <span>\n {{> components/base/image/icon _icon=this.teaserLogo _iconmap="logo" _addClass=(inline-switch this.teaserLogo \'["hessenschau_de"]\' \'["fill-[#005293] w-10 md:w-12 h-10 md:h-12","fill-[#005293] w-40 lg:w-52 h-8 md:h-12"]\')}}\n </span>\n {{/if}}\n {{#if this.title}}\n <span class="text-lg md:text-2xl border-blue-congress {{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}">{{this.title}}</span>\n {{/if}}\n </h2>\n {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} \n </div>\n {{~#with this.headlineListOverview}}\n {{~#if this.link~}}\n <div class="flex mx-5 py-11 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" justify-center md:justify-end"," justify-center"]\'}}">\n {{~> components/button/button_pseudo _color="blue" _linkTitle=this.title~}}\n </div>\n {{~/if~}}\n {{/with~}}\n</article>\n\n'
59
+ module.exports['components/teaser/cluster/teaser_cluster_byline.hbs'] = '\n<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif {{#if _ordered}} pl-8 {{/if}}">\n {{!--Teaser-Info--}}\n {{#with this.teaserInfo}}\n {{#if this.showTeaserInfo~}}\n {{~#if this.showTeaserInfoSection}}\n <span class="uppercase">\n {{../this.documentSection~}}\n </span>\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if}}\n {{~#if this.showTeaserInfoDate}}\n {{~#with ../this.teaserDate}}\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n {{/with~}}\n <span class="mx-px last-of-type:hidden">|</span>\n {{else}}\n {{~#if this.showTeaserInfoDateTime}}\n {{~#with ../this.teaserDate}}\n <time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>\n {{/with~}}\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if~}}\n {{/if~}}\n {{/if}}\n {{/with}}\n\n {{!--Profiles--}}\n {{#if this.showProfileInfoAsByline}}\n {{#if this.profiles}}\n <span>{{this.profiles}}</span>\n <span class="mx-px last-of-type:hidden">|</span>\n {{/if}}\n {{/if}}\n</p>'
60
+ module.exports['components/teaser/cluster/teaser_cluster_item.hbs'] = '\n{{#decorator \'components/base/link\' _css="group" _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1="clusterTeaserLink" _clickLabelPrefix2="Link" }} \n {{> components/teaser/components/teaser_heading\n _headlineTag="h1"\n _label=this.label\n _size=_size\n _title=this.title\n _teaserType="cluster"\n _ordered=_ordered\n _titleBlue=\'true\' \n _firstItem=_firstItem}} \n {{/decorator}}\n{{> components/teaser/cluster/teaser_cluster_byline}}\n \n'
61
+ module.exports['components/teaser/cluster/teaser_cluster_list.hbs'] = '<div class="{{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.teaserSize \'["100"]\' \'[" md:flex md:flex-row"]\'}}{{~/if~}}">\n {{~#if this.showGenreImage}}\n <div class="px-0 pb-5 {{~inline-switch this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3 md:ar-1-1"]\'}}">\n {{~> components/base/image/responsive_image this.genreImage type=this.teaserType variant=this.imageVariant addClass=this.aspectRatio _addClassImg="ar__content" ~}}\n </div>\n {{~/if~}}\n {{~#if this.showFirstImage}}\n {{~#with this.firstEntry~}}\n {{~#if this.teaserImage}}\n <div class="px-0 pb-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:pl-5 md:basis-1/2 lg:basis-1/3"]\'}}"> \n {{~> components/base/image/responsive_image this.teaserImage type=../this.teaserType variant=../this.imageVariant addClass=../this.aspectRatio _addClassImg="ar__content pb-4" ~}}\n <div class="mx-5 {{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:mx-0"]\'}}">\n {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../this.isOrdered _firstItem=true}}\n </div> \n </div> \n {{/if~}}\n {{~/with~}}\n {{/if~}}\n {{~#with this.clusterTeaserItems}}\n {{~#if ../this.isOrdered}}<ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{else}}<ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showGenreImage}}{{~inline-switch ../this.teaserSize \'["100"]\' \'[" md:-pt-5 md:border-none"]\'}}{{/if~}}">{{/if}}\n {{~#each this~}}\n <li class="{{~#if ../../this.isOrdered}} -ordered {{/if}} py-5 {{#if ../../this.headlineListOverview.link}} last-of-type:pb-0{{/if~}} {{~#if ../../this.showGenreImage}}{{~inline-switch ../../this.teaserSize \'["100"]\' \'[" md:first-of-type:pt-0"]\'}}{{/if~}}">\n {{> components/teaser/cluster/teaser_cluster_item _size=../this.teaserSize _ordered=../../this.isOrdered }} \n </li>\n {{~/each}}\n {{~#if ../this.isOrdered}}</ol>{{else}}</ul>{{/if~}}\n {{/with~}}\n</div>'
62
+ module.exports['components/site_header/service_navigation/service_list.hbs'] = '<div \n id="serviceList"\n @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"\n x-ref="serviceList"\n :class="shouldServiceIconsBeHidden() ? \'-mt-40\' : \'\'"\n class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "\n>\n {{#with this.serviceNavigationSSILinks}}\n <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">\n {{#each this}} \n {{> components/base/loadSSI _templatePath=\'components/site_header/service_navigation/service_navigation_item\' }} \n {{/each}} \n </ul>\n {{/with}}\n</div>'
63
+ module.exports['components/site_header/service_navigation/service_navigation_item.hbs'] = '{{#each this.navigationItems}}\n <li class="sb-service-navigation-item {{inline-switch this.id \'["weather","warnung","traffic","video-podcast"]\' \'["-weather", "-warnung", "-traffic", "-video-podcast"]\' }} flex flex-col h-10 lg:h-15 md:h-full w-full tablet:first:border-l border-r last:border-r-0 lg:border-r-0 text-white" >\n {{#if this.subNavigation}} \n <button \n id="{{nextRandom}}" \n @click.debounce.100ms="toggleServiceNav()" \n @click.outside="dropped = false;"\n @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"\n\n x-data="dropdown"\n id="{{getRandom}}"\n \n class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"\n\n :class="dropped ? \'bg-white fill-current text-blue-congress lg:border-0 lg:underline\' : \'\'" \n\n aria-owns="flyout-{{getRandom}}" \n aria-controls="flyout-{{getRandom}}"\n x-effect="$el.setAttribute(\'aria-expanded\', dropped);$el.setAttribute(\'aria-label\', dropped ? \'{{this.text}}-Menü schließen\' : \'{{this.text}}-Menü öffnen\')"\n data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'\n >\n \n {{else}}\n\n {{#if this.extern}}\n <a href="{{this.url}}" target="_blank" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n {{else}}\n <a href="{{resourceUrl this.url}}" x-init="dropped = false" class="flex flex-col items-center justify-center h-full px-4 lg:justify-start lg:px-3 lg:pt-1 lg:rounded-t link-focus-inset-white js-load" id="flyout-{{nextRandom}}-1" data-hr-click-tracking=\'{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Servicenavigation::{{this.text}}-Link geklickt"}]}\'>\n {{/if}}\n\n {{/if}}\n\n <div class="w-7 md:w-8 h-7 md:h-8" >\n {{> components/base/image/icon _icon=this.icon _iconmap="icons" _addClass="w-full h-full"}}\n <span class="sr-only lg:hidden">{{this.text}}</span>\n </div>\n\n <div :class="dropped ? \'text-blue-congress fill-current\' : \'text-white fill-white\'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">\n <div class="flex" >\n <span class="flex text-xs leading-4 whitespace-nowrap">\n {{text}} \n </span>\n {{#if this.subNavigation}} \n <div class="flex lg:pl-1">\n <div class="flex items-center justify-center" :class="dropped ? \'transform rotate-180\':\'\' ">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </div>\n </div>\n {{/if}} \n </div>\n </div> \n {{#if this.subNavigation}} \n {{> components/site_header/navigation_flyout/navigation_flyout _isSectionNav=false _navigationType="ServiceNavigation" _parent=this.text }}\n </button>\n {{else}} \n </a>\n {{/if}} \n </li>\n{{/each}}'
64
64
  module.exports['components/teaser/content_nav/teaser_content_nav.hbs'] = '<div id="contentNavWrapper"\n x-ignore\n ax-load\n ax-load-src="/js/content_nav_alpine.js"\n x-data="contentNavigationHandler()"\n class="col-span-12 flex gap-y-3 gap-x-4 js-load {{inline-switch this.teasersize \'["100","66","50","33","25"]\' \'["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]\'}}"\n>\n {{> components/content_nav/content_nav _teasersize=this.teasersize }} \n</div>'
65
65
  module.exports['components/teaser/group_teaser/group_teaser.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }} \n {{~#if this.hasGroupTitle}}\n <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n {{this.groupTitle}}\n {{~#if this.hasLink}}</a>{{/if~}}\n </h2>\n {{/if}} \n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n{{/components/grid/grid_group}}'
66
66
  module.exports['components/teaser/group_teaser/group_teaser_accented.hbs'] = '{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}\n \n <div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">\n\n {{~#if this.hasGroupTitle}}\n <h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">\n {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}\n {{this.groupTitle}}\n {{~#if this.hasLink}}</a>{{/if~}}\n </h2>\n {{/if}}\n\n </div>\n <div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">\n \n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n \n </div>\n \n{{/components/grid/grid_group}}'
67
67
  module.exports['components/teaser/podcast/podcast.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 rounded-tl-3xl rounded-br-3xl col-main gap-x-6 gap-y-6" > \n {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _type="podcastEpisodePlayerTeaser" }}\n </div>'
68
68
  module.exports['components/teaser/podcast/podcast_playbutton.hbs'] = '<button x-cloak x-on:keydown.tab="{{_clickFunction}}" x-on:click="{{_clickFunction}}" type="button" class="flex justify-start cursor-pointer group focus:outline-none {{_css}}"> \n <div class="">\n <div x-show="!currentlyPlaying" class="text-white rounded-full bg-blue-science ring-white ring">\n {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}\n </div>\n <div x-show="currentlyPlaying" class="bg-white rounded-full ring-blue-science ring text-blue-science">\n {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}\n </div>\n </div>\n</button>'
69
- module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12">\n <div class="flex flex-col">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n <div class="flex flex-col"> \n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <div class="">\n <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\'>\n {{ loca this.loca }}\n </span>\n </div> \n {{/with}}\n \n {{~#with airdateDate}}\n <div class="flex grow pt-1.5 text-xs font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download Icon --}}\n <div class="flex pr-2 md:pr-5">\n <a href="{{this.podcastDownloadUrl}}" class="h-6 button js-load" {{#with this.trackingData}} data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-neu\' _addClass="h-6 w-6 text-blue-science fill-current" }}\n </a>\n </div>\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2 md:pr-5"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass=" overflow-hidden ar--100"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n\n {{!-- Player UI --}}\n <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14">\n {{> components/teaser/podcast/podcast_player_ui }} \n </div>\n \n {{!-- Abo-Dropdown --}}\n {{!-- // TODO: Dropdown-Items need to be flexible via CMS so we need Array in Json and iterate over it --}}\n <div class="flex flex-row p-5 md:pr-0">\n {{#with this.podcastChannel}} \n <div class="flex">\n {{!-- Container --}}\n <div x-cloak x-data="{\n open: false,\n toggle() {\n if (this.open) {\n return this.close()\n }\n this.$refs.button.focus()\n this.open = true\n },\n close(focusAfter) {\n if (! this.open) return\n this.open = false\n focusAfter && focusAfter.focus()\n }}"\n x-on:keydown.escape.prevent.stop="close($refs.button)"\n x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n x-id="[\'dropdown-button\']"\n class="relative"\n >\n\n {{!-- Button --}}\n <button\n x-ref="button"\n x-on:click="toggle()"\n :aria-expanded="open"\n :aria-controls="$id(\'dropdown-button\')"\n type="button"\n class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-show="open">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}\n </div>\n </button>\n\n {{!-- Flyout --}}\n <div\n x-ref="panel"\n x-show="open"\n x-transition.origin.top.left\n x-on:click.outside="close($refs.button)"\n :id="$id(\'dropdown-button\')"\n style="display: none;"\n class="absolute left-0 flex flex-col w-full px-2 text-sm text-white shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"\n >\n {{!--// TODO: these Items should come via iteration over items-array --}}\n {{#with this.podcastItunesUrl}}\n <a class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500"\n title="Bei iTunes abonnieren" target="_blank"\n rel="noopener noreferrer"\n href="{{this}}"> \n ITunes-Podcast \n </a> \n {{/with}}\n <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">\n Apple Podcast\n </a>\n <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">\n ARD Audiothek\n </a>\n <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">\n Spotify\n </a>\n <a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500">\n RSS Feed\n </a>\n </div>\n </div>\n </div>\n {{/with}}\n\n {{!-- Sendungs-Link --}}\n <div class="flex justify-end w-full pl-4 md:pr-52">\n <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">\n <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>\n <a class="underline" href="#">{{#with this.teaserInfo}} {{~#if this.showTeaserInfoChannel}} <span class="text__byline">{{../this.podcastChannel.title}}</span>{{/if}} {{/with}}</a>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n{{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n{{/unless}}\n\n<style>\n/* Modify the appearance of the slider thumb */\n.seek_slider::-webkit-slider-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n.seek_slider::-moz-range-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n</style>'
69
+ module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12">\n <div class="flex flex-col">\n {{!-- First Row --}}\n <div class="flex flex-row px-5 md:pl-5 {{#if ../_ordered}} pl-8 {{/if}} ">\n <div class="flex flex-col"> \n <div class="flex max-h-6">\n {{!-- Label / Airdate --}}\n {{#with label}} \n <div class="">\n <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\'>\n {{ loca this.loca }}\n </span>\n </div> \n {{/with}}\n \n {{~#with airdateDate}}\n <div class="flex grow pt-1.5 text-xs font-headingSerif text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n\n {{!-- Download Icon --}}\n <div class="flex pr-2 md:pr-5">\n <a href="{{this.podcastDownloadUrl}}" class="h-6 button js-load" {{#with this.trackingData}} data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{../_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-neu\' _addClass="h-6 w-6 text-blue-science fill-current" }}\n </a>\n </div>\n </div>\n\n {{!-- Überschrift: --}}\n <div class="flex pb-5 pr-2 md:pr-5"> \n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }} \n </div>\n\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex flex-col ">\n <div class="w-24 md:w-42">\n {{> components/base/image/responsive_image this.teaseritem \n _type=this.teaserType\n _variant="default"\n _addClass=" overflow-hidden ar--100"\n _noDelay=this.dontLazyload \n _addClassImg="w-full h-24 md:h-42 block"\n }}\n </div>\n </div>\n\n </div>\n\n {{!-- Player UI --}}\n <div class="flex px-5 md:pl-5 md:pr-52 md:-mt-14">\n {{> components/teaser/podcast/podcast_player_ui }} \n </div>\n \n {{!-- Abo-Dropdown --}}\n {{!-- // TODO: Dropdown-Items need to be flexible via CMS so we need Array in Json and iterate over it --}}\n <div class="flex flex-row p-5 md:pr-0">\n {{#with this.podcastChannel}} \n <div class="flex">\n {{!-- Container --}}\n <div x-cloak x-data="{\n open: false,\n toggle() {\n if (this.open) {\n return this.close()\n }\n this.$refs.button.focus()\n this.open = true\n },\n close(focusAfter) {\n if (! this.open) return\n this.open = false\n focusAfter && focusAfter.focus()\n }}"\n x-on:keydown.escape.prevent.stop="close($refs.button)"\n x-on:focusin.window="! $refs.panel.contains($event.target) && close()"\n x-id="[\'dropdown-button\']"\n class="relative"\n >\n\n {{!-- Button --}}\n <button\n x-ref="button"\n x-on:click="toggle()"\n :aria-expanded="open"\n :aria-controls="$id(\'dropdown-button\')"\n type="button"\n class="flex items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-orange-layout">Abonnieren\n <div x-show="open">\n {{> components/base/image/icon _icon=\'arrow-up\' _addClass="flex self-center w-3 h-3 fill-white" }}\n </div>\n <div x-show="!open">\n {{> components/base/image/icon _icon=\'arrow-down\' _addClass="flex self-center mt-0.5 w-3 h-3 fill-white" }}\n </div>\n </button>\n\n {{!-- Flyout --}}\n <div\n x-ref="panel"\n x-show="open"\n x-transition.origin.top.left\n x-on:click.outside="close($refs.button)"\n :id="$id(\'dropdown-button\')"\n style="display: none;"\n class="absolute left-0 flex flex-col w-full px-2 text-sm text-white shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"\n >\n {{#with this.podcastHoster}}\n <ul>\n {{#each this}}\n <li class="border-b last:border-0"> \n <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"\n title="{{this.podcastHosterName}}" \n target="_blank"\n rel="noopener noreferrer"\n href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>\n </li>\n {{/each}}\n </ul>\n {{/with}}\n \n </div>\n </div>\n </div>\n {{/with}}\n\n {{!-- Sendungs-Link --}}\n <div class="flex justify-end w-full pl-4 md:pr-52">\n <div class="flex flex-wrap self-end text-xs font-heading text-blue-science">\n <span class="flex pr-2 font-bold whitespace-nowrap">Zur Sendung: </span>\n <a class="underline" href="#">{{#with this.teaserInfo}} {{~#if this.showTeaserInfoChannel}} <span class="text__byline">{{../this.podcastChannel.title}}</span>{{/if}} {{/with}}</a>\n </div>\n </div>\n </div>\n </div> \n</div>\n\n{{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="col-span-12 px-5 pb-5 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">\n <span class="c-teaser__shorttext"> {{this}} </span>\n </div>\n {{/with~}}\n {{/unless}}\n{{/unless}}\n\n<style>\n/* Modify the appearance of the slider thumb */\n.seek_slider::-webkit-slider-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n.seek_slider::-moz-range-thumb{\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n</style>'
70
70
  module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex flex-wrap w-full"> \n <div class="flex flex-wrap w-full js-load" \n x-data="playaudio()"\n ax-load\n x-ignore\n ax-load-src="/js/podcastPlayer.alpine.js"\n x-init="setTime( \'{{podcastDuration}}\' )" >\n\n <div class="flex items-center w-full flex-nowrap">\n {{!-- Start/StopButton --}}\n <div class="flex">\n {{> components/teaser/podcast/podcast_playbutton _clickFunction="playAndStop" _css="mr-4" _title=this.title _teaserSize=this.teaserSize _addClass="" }}\n </div>\n\n {{!-- Range Slider --}}\n <div class="flex w-full">\n <input x-ref="range" id="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="flex h-1 bg-white rounded-lg appearance-none cursor-pointer grow seek_slider" > \n </div>\n </div>\n \n {{!-- Meta Time usw. --}}\n {{> components/teaser/podcast/podcast_timedisplay _duration=podcastDuration _currentTimeClasses="font-bold text-orange-layout" _durationClasses="text-blue-science" _containerCss="pl-16 -mt-3 flex text-xs grow font-headingSerif"}}\n\n {{!-- AudioElement --}}\n {{~#with this.audioUrl ~}}\n <audio preload="metadata" class="hidden" x-ref=\'audio\'>\n <source id="audio" src={{this}} type=\'audio/mp3\'/>\n </audio>\n {{/with}}\n </div>\n</div>'
71
71
  module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div x-cloak class="{{_containerCss}}">\n <span class="{{_currentTimeClasses}}" x-text="currentTime">0:00</span>\n <span class="{{_durationClasses}} px-0.5"> / </span>\n <span class="{{_durationClasses}}" x-text="audioDurationFancy"> </span>\n</div>'
72
72
  module.exports['components/teaser/podcast/podcast_title.hbs'] = '{{#decorator \'components/base/link\' _css="font-headingSerif font-bold text-base mt-2.5 text-toplineColor line-clamp-4 md:line-clamp-2 ..." }} \n <span class="block mt-0.5 group-hover:underline text-blue-science {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize \'["100","50"]\'\'["text-base md:text-2xl","text-base md:text-lg"]\' ~}}">\n {{~_title~}}\n </span>\n{{/decorator}}'
73
73
  module.exports['components/teaser/tabbox/group_tabbox.hbs'] = '<section \n x-show="tab === \'{{this.groupTitle}}\'"\n class="pb-10"\n>\n {{~#if this.hasGroupTitle~}}\n <h3 class="sr-only">\n <a class="" href="#tgp{{this.teaserIndex}}">\n <span class="">{{this.groupTitle}}</span>\n <span class="">\n {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n {{> components/base/image/icon _icon="arrow-up" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}\n </span>\n </a>\n </h3>\n {{~/if~}}\n\n <a class="w-0" name="tgp{{this.teaserIndex}}"></a>\n <div class="grid content-start grid-cols-12 px-0 md:px-8 colspan-12 gap-x-6 gap-y-6">\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </div>\n {{~#if this.link~}}\n <div class="flex justify-center pt-8">\n {{~> components/button/button_pseudo _linkTitle=(loca "group_tabbed_more" this.title) ~}}\n </div>\n {{~/if~}}\n</section>'
74
- module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6"\n>\n <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n {{~#each this.tabbedGroup~}}\n <button onclick="window.location.href=\'#tgp{{@index}}\';"\n :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-blue-congress border-white hover:border-blue-congress\'" \n x-effect="$el.removeAttribute(\'onclick\')"\n x-on:click.prevent="tab = \'{{this.title}}\'" \n class="border text-base font-heading py-px px-2 m-1.5" \n type="button" \n role="tab"\n >\n {{this.title}}\n </button>\n {{~/each~}}\n </div>\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6"> '
74
+ module.exports['components/teaser/tabbox/teaser_tabbox.hbs'] = '</div>\n<div \n x-data="{ tab: \'{{this.tabbedGroup.[0].title}}\' }"\n class="grid col-full grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl md:col-main gap-x-6 gap-y-6"\n>\n <section class="col-span-full" data-hr-group-tabbed=\'{"wandaPageId":"{{this.wandaPageId}}"}\'>\n <div class="flex flex-wrap justify-center mb-7 mx-1.5" role="tablist">\n {{~#each this.tabbedGroup~}}\n <button onclick="window.location.href=\'#tgp{{@index}}\';"\n :class="tab === \'{{this.title}}\' ? \'text-white bg-blue-congress border-blue-congress\' : \'bg-white text-blue-congress border-white hover:border-blue-congress\'" \n x-effect="$el.removeAttribute(\'onclick\')"\n x-on:click.prevent="tab = \'{{this.title}}\'" \n class="border text-base font-heading py-px px-2 m-1.5" \n type="button" \n role="tab"\n >\n {{this.title}}\n </button>\n {{~/each~}}\n </div>\n {{~> components/teaser/teaser_logic/teaser_logic ~}}\n </section>\n</div>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
75
75
  module.exports['components/teaser/teaser_logic/teaser_logic.hbs'] = '{{~#each this.logicItems}}\n {{~#if this.isSsi~}} \n {{#if (isStorybook)}} \n {{> components/teaser/teaser_logic/teaser_logic.ssi }} \n {{else}}\n {{{this.ssi}}}\n {{/if}} \n {{~else}}\n {{~#with this.includeModel~}}\n {{~#if (isStorybook)~}}\n {{~> components/base/load_dynamic _templatePath=../includePath ~}} \n {{~else~}}\n {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n {{~/if~}}\n{{/each~}}'
76
76
  module.exports['components/teaser/teaser_logic/teaser_logic.ssi.hbs'] = '{{~#with this.logicItem~}}\n {{~#with this.includeModel~}}\n {{~#if (isStorybook)~}}\n {{~> components/base/load_dynamic _templatePath=../includePath ~}}\n {{~else~}}\n {{~> (lookup ../. \'includePath\')~}}\n {{~/if~}}\n {{~/with~}}\n{{~/with~}}'
package/dist/assets/index.css CHANGED
@@ -2038,7 +2038,7 @@ video {
2038
2038
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2039
2039
  }
2040
2040
  .counter-reset {
2041
- counter-reset: cnt1666258538491;
2041
+ counter-reset: cnt1666259928115;
2042
2042
  }
2043
2043
  .line-clamp-4 {
2044
2044
  overflow: hidden;
@@ -2427,7 +2427,7 @@ video {
2427
2427
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2428
2428
  }
2429
2429
  .-ordered {
2430
- counter-increment: cnt1666258538491 1;
2430
+ counter-increment: cnt1666259928115 1;
2431
2431
  }
2432
2432
  .-ordered::before {
2433
2433
  position: absolute;
@@ -2444,7 +2444,7 @@ video {
2444
2444
  letter-spacing: .0125em;
2445
2445
  --tw-text-opacity: 1;
2446
2446
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2447
- content: counter(cnt1666258538491);
2447
+ content: counter(cnt1666259928115);
2448
2448
  }
2449
2449
  /*! purgecss start ignore */
2450
2450
  :root,
@@ -2844,6 +2844,9 @@ video {
2844
2844
  .last\:mb-0:last-child {
2845
2845
  margin-bottom: 0px;
2846
2846
  }
2847
+ .last\:border-0:last-child {
2848
+ border-width: 0px;
2849
+ }
2847
2850
  .last\:border-b-0:last-child {
2848
2851
  border-bottom-width: 0px;
2849
2852
  }
package/dist/views/components/teaser/podcast/podcast_player.hbs CHANGED
@@ -106,27 +106,20 @@
106
106
  style="display: none;"
107
107
  class="absolute left-0 flex flex-col w-full px-2 text-sm text-white shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"
108
108
  >
109
- {{!--// TODO: these Items should come via iteration over items-array --}}
110
- {{#with this.podcastItunesUrl}}
111
- <a class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500"
112
- title="Bei iTunes abonnieren" target="_blank"
113
- rel="noopener noreferrer"
114
- href="{{this}}">
115
- ITunes-Podcast
116
- </a>
109
+ {{#with this.podcastHoster}}
110
+ <ul>
111
+ {{#each this}}
112
+ <li class="border-b last:border-0">
113
+ <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
114
+ title="{{this.podcastHosterName}}"
115
+ target="_blank"
116
+ rel="noopener noreferrer"
117
+ href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
118
+ </li>
119
+ {{/each}}
120
+ </ul>
117
121
  {{/with}}
118
- <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">
119
- Apple Podcast
120
- </a>
121
- <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">
122
- ARD Audiothek
123
- </a>
124
- <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">
125
- Spotify
126
- </a>
127
- <a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500">
128
- RSS Feed
129
- </a>
122
+
130
123
  </div>
131
124
  </div>
132
125
  </div>
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "0.67.2",
9
+ "version": "0.68.0",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/assets/fixtures/teaser/teasers.inc.json CHANGED
@@ -531,8 +531,26 @@
531
531
  "podcastChannel": {
532
532
  "title": "Der Tag in Hessen!",
533
533
  "url": "#ChannelURL",
534
- "podcastItunesUrl": "#ItunesURL",
535
- "podcastRssUrl": "#RSSURL"
534
+
535
+ "podcastHoster" : [
536
+ {
537
+ "podcastHosterUrl" : "https://itunes.apple.com/de/podcast/hr-info-der-tag-in-hessen/id273944140?mt=2",
538
+ "podcastHosterName" : "ITunes"
539
+ },
540
+ {
541
+ "podcastHosterUrl" : "https://podcast.hr.de/der_tag_in_hessen/podcast.xml",
542
+ "podcastHosterName" : "RSS"
543
+ },
544
+ {
545
+ "podcastHosterUrl" : "https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2Rlcl90YWdfaW5faGVzc2VuL3BvZGNhc3QueG1s?hl=de",
546
+ "podcastHosterName" : "Google Podcasts"
547
+ },
548
+ {
549
+ "podcastHosterUrl" : "https://www.ardaudiothek.de/sendung/der-tag-ein-thema-viele-perspektiven/470522/",
550
+ "podcastHosterName" : "ARD Audiothek"
551
+ }
552
+ ]
553
+
536
554
  },
537
555
  "audioUrl": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3",
538
556
  "podcastDownloadUrl": "https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3",
@@ -540,21 +558,7 @@
540
558
  "@->jsoninclude": "teaser/teaser_images.inc.json",
541
559
  "@->contentpath": "standard_1"
542
560
  },
543
- "commentsSsi": {
544
- "commentNumber": "666",
545
- "hasOneComment": false,
546
- "hasManyComments": true,
547
- "commentLink": {
548
- "link": {
549
- "url": "/teaser1-comments",
550
- "webviewUrl": "/teaser1-comments#webview",
551
- "isTargetBlank": false,
552
- "readMoreText": {
553
- "readMoreScreenreader": "Zu den Kommentaren des Artikels"
554
- }
555
- }
556
- }
557
- },
561
+
558
562
  "documentSection": "Gesellschaft",
559
563
  "displayTeaserBodyAsImageOverlay": false,
560
564
  "hasMediaButtons": false,
package/src/stories/views/components/teaser/fixtures/teaser_podcast.json CHANGED
@@ -1 +1 @@
1
- {"isSsi":true,"logicItem":{"includePath":"components/teaser/podcast/podcast","includeModel":{"byline":"Byline","title":"Hier steht ein unheimlich toller langer Podcast-Titel, der wird bei Desktop nach zwei Zeilen und mobil nach max. 4 Zeilen mit 3 Punkten abgekürzt, sollte er zu lang sein","topline":"Hier steht die Topline","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1984","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"podcastDuration":"07:52","teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"podcastChannel":{"title":"Der Tag in Hessen!","url":"#ChannelURL","podcastItunesUrl":"#ItunesURL","podcastRssUrl":"#RSSURL"},"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3","podcastDownloadUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/1920/1080 1920w"}]}},"commentsSsi":{"commentNumber":"666","hasOneComment":false,"hasManyComments":true,"commentLink":{"link":{"url":"/teaser1-comments","webviewUrl":"/teaser1-comments#webview","isTargetBlank":false,"readMoreText":{"readMoreScreenreader":"Zu den Kommentaren des Artikels"}}}},"documentSection":"Gesellschaft","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":false,"shorttext":"Bla ..... Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre liebe Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"}}}},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"sans serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/1920/1080 1920w"}]}},"teaserSize":"hero","isMobile1to1":false,"teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"07:42 min","bylineText":""}}}}}
1
+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/podcast/podcast","includeModel":{"byline":"Byline","title":"Hier steht ein unheimlich toller langer Podcast-Titel, der wird bei Desktop nach zwei Zeilen und mobil nach max. 4 Zeilen mit 3 Punkten abgekürzt, sollte er zu lang sein","topline":"Hier steht die Topline","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard-ds","teaserSize":"100","isMobile1to1":false,"airdateDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1984","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaseritem":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"podcastDuration":"07:52","teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"podcastChannel":{"title":"Der Tag in Hessen!","url":"#ChannelURL","podcastHoster":[{"podcastHosterUrl":"https://itunes.apple.com/de/podcast/hr-info-der-tag-in-hessen/id273944140?mt=2","podcastHosterName":"ITunes"},{"podcastHosterUrl":"https://podcast.hr.de/der_tag_in_hessen/podcast.xml","podcastHosterName":"RSS"},{"podcastHosterUrl":"https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0LmhyLmRlL2Rlcl90YWdfaW5faGVzc2VuL3BvZGNhc3QueG1s?hl=de","podcastHosterName":"Google Podcasts"},{"podcastHosterUrl":"https://www.ardaudiothek.de/sendung/der-tag-ein-thema-viele-perspektiven/470522/","podcastHosterName":"ARD Audiothek"}]},"audioUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3","podcastDownloadUrl":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/1920/1080 1920w"}]}},"documentSection":"Gesellschaft","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":false,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":true,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":true,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h2","icon":"ortsmarke","imageVariant":"topteaser","hideShortText":false,"shorttext":"Bla ..... Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre liebe Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"isPodcast":true,"toModel":{"audioElement":{"isPodcast":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"http://localhost:8080/site/hessenschau/assets_2.85.0/vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"site":"551103","config":{"getCollectDomainSSL":"logs1406.xiti.com","secure":true},"page":{"name":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audio:audioPlay","level2":"4","chapter1":"Audio-Start","chapter2":"OnDemand","customVars":{"site":{"1":"podcast-episode-43976","2":"hr-nt:podcastEpisode","5":"202203230802"}}},"richMedia":{"mediaType":"audio","playerId":"4076","mediaLevel2":"4","mediaLabel":"muslim_fashion__mehr_als_ein_kopftuch__podcast:audioPlay","mediaTheme1":"OnDemand","duration":"3040","broadcastMode":"clip"}}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://mp3podcasthr-a.akamaihd.net/mp3/podcast/derTag/derTag_20190320_81142988.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":3040,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Muslim Fashion. Mehr als ein Kopftuch.","synopsis":"Wo immer die Ausstellung \"Contemporary Muslim Fashion“ ins Museum kommt, entfacht sie heftige Diskussionen. Nachdem die Schau in San Francisco für Furore sorgte, wird sie demnächst im Frankfurter Museum für Angewandte Kunst als erste Station in Europa gezeigt. Die \"Modest Fashion“, die dezente Mode, so das Schlagwort für die verhüllende, aber keineswegs unsichtbar machende Mode, spaltet das feministische Lager: Ist sie eine Momentaufnahme aktueller muslimischer Kleidungsstile aus aller Welt oder Werbung für die weibliche Verschleierung? In jedem Fall zeigt die Ausstellung, dass die Verhüllung des weiblichen Körpers und der Frisur nicht nur trist, sondern auch schön sein kann - und für manche Trägerinnen befreiend. Und sie ist durchaus politisch, diskutiert gesetzliche Kleiderordnungen und die Frage politischer Symbolik. Inzwischen wollen auch westliche Firmen von der Vielfalt muslimischer Mode profitieren. Sie haben die Konsumentinnen im Nahen Osten und Südostasien als kaufkräftige Klientel entdeckt. Dort ist ein riesiger Markt zu erschließen. Nicht selten wagen sie sich damit an die Grenzen religiöser und gesellschaftlicher Akzeptanz. Kann Mode solche Grenzen überwinden? "},"pluginData":{},"geoBlocked":false},"playerId":"4076","type":"audioOndemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.4fc164e9.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.3.4.8ea4ea3d.js","isAutoplay":true,"teaserSize":"50"}}}},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"sans serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/101/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/101/320/180 320w, https://picsum.photos/id/101/480/270 480w, https://picsum.photos/id/101/640/360 640w, https://picsum.photos/id/101/960/540 960w, https://picsum.photos/id/101/1920/1080 1920w"}]}},"teaserSize":"hero","isMobile1to1":false,"teaserType":"standard-ds","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"podcast","loca":"label_podcast","byline":{"bylineSsi":"07:42 min","bylineText":""}}}}}
package/src/stories/views/components/teaser/podcast/podcast_player.hbs CHANGED
@@ -106,27 +106,20 @@
106
106
  style="display: none;"
107
107
  class="absolute left-0 flex flex-col w-full px-2 text-sm text-white shadow-md font-heading shadow-insetfromtop grow bg-orange-layout"
108
108
  >
109
- {{!--// TODO: these Items should come via iteration over items-array --}}
110
- {{#with this.podcastItunesUrl}}
111
- <a class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500"
112
- title="Bei iTunes abonnieren" target="_blank"
113
- rel="noopener noreferrer"
114
- href="{{this}}">
115
- ITunes-Podcast
116
- </a>
109
+ {{#with this.podcastHoster}}
110
+ <ul>
111
+ {{#each this}}
112
+ <li class="border-b last:border-0">
113
+ <a class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500"
114
+ title="{{this.podcastHosterName}}"
115
+ target="_blank"
116
+ rel="noopener noreferrer"
117
+ href="{{this.podcastHosterUrl}}">{{this.podcastHosterName}}</a>
118
+ </li>
119
+ {{/each}}
120
+ </ul>
117
121
  {{/with}}
118
- <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">
119
- Apple Podcast
120
- </a>
121
- <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">
122
- ARD Audiothek
123
- </a>
124
- <a href="#" class="flex items-center w-full gap-2 py-2 text-left border-b hover:underline disabled:text-gray-500">
125
- Spotify
126
- </a>
127
- <a title="RSS Feed abonnieren" target="_blank" rel="noopener noreferrer" href="{{this.podcastRssUrl}}" class="flex items-center w-full gap-2 py-2 text-left hover:underline disabled:text-gray-500">
128
- RSS Feed
129
- </a>
122
+
130
123
  </div>
131
124
  </div>
132
125
  </div>