hr-design-system-handlebars 0.61.0 → 0.62.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.
- package/CHANGELOG.md +25 -0
- package/build/handlebars/partials/handlebar-partials.js +10 -6
- package/dist/assets/icons/icons/svgmap/download-neu.svg +13 -0
- package/dist/assets/icons/icons/svgmap.min.svg +1 -1
- package/dist/assets/index.css +9 -48
- package/dist/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_playbutton.hbs +10 -0
- package/dist/views/components/teaser/podcast/podcast_player.hbs +16 -58
- package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +27 -0
- package/dist/views/components/teaser/podcast/podcast_timedisplay.hbs +5 -0
- package/dist/views/components/teaser/podcast/podcast_title.hbs +5 -0
- package/package.json +1 -1
- package/src/assets/fixtures/teaser/teasers.inc.json +3 -2
- package/src/assets/icons/icons/svgmap/download-neu.svg +13 -0
- package/src/assets/icons/icons/svgmap.min.svg +1 -1
- package/src/assets/js/podcastPlayer.alpine.js +24 -14
- package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_podcast.json +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_playbutton.hbs +10 -0
- package/src/stories/views/components/teaser/podcast/podcast_player.hbs +16 -58
- package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +27 -0
- package/src/stories/views/components/teaser/podcast/podcast_timedisplay.hbs +5 -0
- package/src/stories/views/components/teaser/podcast/podcast_title.hbs +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v0.62.0 (Tue Oct 11 2022)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- Dpe 1696 podcast player refactoring [#338](https://github.com/mumprod/hr-design-system-handlebars/pull/338) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.61.1 (Mon Oct 10 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Dpe 1677 [#334](https://github.com/mumprod/hr-design-system-handlebars/pull/334) (zouhair1 [@selbaciri](https://github.com/selbaciri))
|
|
18
|
+
|
|
19
|
+
#### Authors: 2
|
|
20
|
+
|
|
21
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
22
|
+
- selbaciri (zouhair1)
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v0.61.0 (Fri Oct 07 2022)
|
|
2
27
|
|
|
3
28
|
#### 🚀 Enhancement
|
|
@@ -40,15 +40,14 @@ module.exports['components/site_header/navigation_flyout/navigation_flyout_colum
|
|
|
40
40
|
module.exports['components/site_header/navigation_flyout/navigation_flyout_item.hbs'] = '<li :class="dropped ? \'h-auto\' : \'h-10\'" \n class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">\n {{#decorator \'components/base/link\' _css=(inline-switch _fromNav \'["RubrikNavigation","ServiceNavigation"]\' \'["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]\') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}\n {{this.text}} \n {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}\n {{/decorator}} \n</li>'
|
|
41
41
|
module.exports['components/site_header/navigation_search/quick_search_button.hbs'] = '<div \n x-cloak class="sb-quick-search-button flex items-center h-8 md:h-full md:border-r md:border-l md:border-white lg:border-none" \n :class="$store.searchFieldOpen == true ? \'bg-white mt-2 rounded-t md:mt-0 md:rounded-none\' : \'bg-blue-congress\'"\n>\n <button \n @click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"\n @click.debounce.100ms="$dispatch(\'burger-close\'); $dispatch(\'search-mobile-click\'); $dispatch(\'close-servicemenu\');"\n class="h-full text-white cursor-pointer md:px-4 lg:hidden"\n x-effect="$el.setAttribute(\'id\', \'flyout-\' + $store.searchID.current + \'-1\');$el.setAttribute(\'aria-owns\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-controls\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-expanded\', $store.searchFieldOpen == true);$el.setAttribute(\'aria-label\', $store.searchFieldOpen == true ? \'Suche schließen\' : \'Suche öffnen\')"\n >\n <svg \n x-show="$store.searchFieldOpen == false"\n class="h-5 text-white fill-current w-9" \n xmlns="http://www.w3.org/2000/svg" \n viewBox="0 0 20 20"\n role="presentation" \n x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == 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 <svg \n x-show="$store.searchFieldOpen == true"\n class="h-6 fill-current w-9 text-blue-congress" \n xmlns="http://www.w3.org/2000/svg" \n viewBox="0 0 20 20"\n x-effect="$el.setAttribute(\'aria-hidden\', $store.searchFieldOpen == false)"\n >\n <path d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>\n </svg>\n </button>\n</div>'
|
|
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(/"/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
|
+
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'
|
|
44
|
+
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>'
|
|
45
|
+
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'
|
|
46
|
+
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>'
|
|
43
47
|
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
48
|
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
49
|
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
50
|
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=(if this.isHessenschauLogo \'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
|
-
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>'
|
|
52
51
|
module.exports['components/teaser/components/teaser_av_consumption.hbs'] = '{{#with this.teaserLead.avDocument}}\n {{~#if this.isVideo ~}}\n {{~> components/mediaplayer/media_player this.toModel.videoElement _cypressHook="js-video-ondemand" _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio _teaserSize=../_teaserSize ~}}\n {{~/if~}}\n {{~#if this.isAudio ~}}\n {{~> components/mediaplayer/media_player this.toModel.audioElement _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~}}\n {{~#if this.isPodcast ~}}\n {{~> components/mediaplayer/media_player this.toModel.audioElement _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~}}\n {{~#if this.isAudioEventLivestream ~}}\n {{~> components/mediaplayer/media_player this.toModel.audioLivestreamElement _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~}}\n {{~#if this.isLivestream ~}}\n {{~> components/mediaplayer/media_player this.toModel.videoLivestreamElement _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~}}\n \n{{/with}}\n{{#if _isMobile1to1~}} \n {{> 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="avStart = false; $dispatch(\'player_closed\')"}}\n{{~/if~}}'
|
|
53
52
|
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>'
|
|
54
53
|
module.exports['components/teaser/components/teaser_byline.hbs'] = '<p class="mt-2.5 text-xs text-grey-scorpion font-headingSerif">\n \n {{!--Teaser-Info--}}\n {{#with this.teaserInfo}}\n {{#if this.showTeaserInfo~}}\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\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\n {{/if}}\n {{/with}}\n\n {{!--Profiles--}}\n {{#if this.profiles}}\n <span>{{this.profiles}}</span> \n <span class="mx-px last-of-type:hidden">|</span> \n {{/if}} \n\n {{!--Comments--}}\n {{#with this.commentsSsi}}\n {{> components/base/loadSSI _templatePath=\'components/teaser/components/teaser_comments\' }} \n {{/with}}\n</p>\n'
|
|
@@ -61,10 +60,15 @@ module.exports['components/teaser/components/teaser_text.hbs'] = '<span\n cla
|
|
|
61
60
|
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
61
|
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
62
|
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>'
|
|
63
|
+
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>'
|
|
64
64
|
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}}'
|
|
65
65
|
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}}'
|
|
66
66
|
module.exports['components/teaser/podcast/podcast.hbs'] = '<div class="grid grid-cols-12 pt-5 md:pt-5 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md: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>'
|
|
67
|
-
module.exports['components/teaser/podcast/
|
|
67
|
+
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" _iconmap="icons" _addClass="inline pl-1 py-2 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>'
|
|
68
|
+
module.exports['components/teaser/podcast/podcast_player.hbs'] = '<div class="flex col-span-12">\n <div class="relative flex flex-col">\n {{!-- First Row --}}\n <div class="flex flex-row pl-5 ">\n <div class="flex">\n {{#with label}} \n <div class="{{#if ../_ordered}} pl-8 {{/if}}">\n <span class=\'sb-label mr-4 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="w-full pt-1 text-sm text-blue-science">\n <time datetime="{{this.htmlDateTime}}">{{this.date}}</time>\n </div>\n {{/with}}\n </div>\n {{!-- Download Icon --}}\n <div class="absolute right-0 flex w-auto">\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 {{!-- Second Row --}}\n <div class="flex flex-row pb-5 pl-5">\n {{!-- Überschrift: --}}\n <div class="flex w-full">\n {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}\n </div> \n </div>\n\n {{!-- Third Row --}}\n <div class="flex flex-row pl-5">\n {{!-- Player UI --}}\n {{> components/teaser/podcast/podcast_player_ui }} \n </div>\n\n {{!-- Fourth Row --}}\n <div class="flex flex-row p-5 pr-0">\n {{#with this.podcastChannel}}\n {{!-- Abo-Dropdown --}}\n {{!-- // TODO: Dropdown-Items need to be flexible via CMS so we need Array in Json and iterate over it --}}\n \n <div class="flex">\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 <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 w-40 gap-2 px-4 py-2 font-bold text-white shadow bg-orange-layout">Abonnieren\n\n <svg xmlns="http://www.w3.org/2000/svg" class="flex self-end w-5 h-5 ml-2 text-white" viewBox="0 0 20 20" fill="currentColor">\n <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />\n </svg>\n </button>\n\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 w-40 text-white shadow-md bg-orange-layout"\n >\n {{!--// TODO: Items should be built via iteration over items-array --}}\n {{#with this.podcastItunesUrl}}\n <a class="flex items-center w-full gap-2 px-4 py-2 text-left border-t 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 px-4 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 px-4 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 px-4 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 px-4 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">\n <div class="flex self-end text-blue-science">\n <span class="flex pr-2 font-bold">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 \n </div>\n </div>\n\n {{!-- Podcast Image --}}\n <div class="flex px-5 w-52">\n <div class="w-52 h-52">\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-42 h-42 block"\n }}</div>\n </div> \n</div>\n\n{{#unless _isSinglePage}}\n {{#unless this.hideShortText}}\n {{~#with this.shorttext}}\n <div class="col-span-12 p-8 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: 15px;\n height: 15px;\n background: #F07800;\n border: 2px solid white;\n cursor: pointer;\n border-radius: 50%;\n}\n\n</style>'
|
|
69
|
+
module.exports['components/teaser/podcast/podcast_player_ui.hbs'] = '<div class="flex w-full"> \n <div class="flex items-center grow 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-40">\n {{!-- Start/StopButton --}}\n {{> components/teaser/podcast/podcast_playbutton _clickFunction="playAndStop" _css="mr-4" _title=this.title _teaserSize=this.teaserSize _addClass="" }}\n\n {{!-- Meta Time usw. --}}\n {{> components/teaser/podcast/podcast_timedisplay _textSize="text-sm" _duration=podcastDuration _currentTimeClasses="text-orange-layout" _durationClasses="text-blue-science" _containerCss="flex justify-end w-full font-bold"}}\n </div>\n \n {{!-- Range Slider --}}\n <input x-ref="range" id="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="flex self-center flex-grow h-1 ml-4 bg-white rounded-lg appearance-none cursor-pointer seek_slider" > \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>'
|
|
70
|
+
module.exports['components/teaser/podcast/podcast_timedisplay.hbs'] = '<div x-cloak class="{{_containerCss}}">\n <span class="{{_textSize}} {{_currentTimeClasses}} " x-text="currentTime">0:00</span>\n <span class="{{_textSize}} {{_durationClasses}}"> / </span>\n <span class="{{_textSize}} {{_durationClasses}}" x-text="audioDurationFancy"> </span>\n</div>'
|
|
71
|
+
module.exports['components/teaser/podcast/podcast_title.hbs'] = '{{#decorator \'components/base/link\' _css="font-heading font-bold mt-2.5 text-toplineColor line-clamp-2 ..." }} \n <span class="block mt-0.5 group-hover:underline text-blue-congress {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize \'["100","50"]\'\'["text-2xl","text-lg"]\' ~}}">\n {{~_title~}}\n </span>\n{{/decorator}}'
|
|
68
72
|
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>'
|
|
69
73
|
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"> '
|
|
70
74
|
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~}}'
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 26.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
|
5
|
+
<style type="text/css">
|
|
6
|
+
.st0{fill:#020203;}
|
|
7
|
+
</style>
|
|
8
|
+
<path class="st0" d="M17.2,0H6.8C3,0,0,3,0,6.8v10.5C0,21,3,24,6.8,24h10.5c3.7,0,6.8-3,6.8-6.8V6.8C24,3,21,0,17.2,0z M7.2,11.2
|
|
9
|
+
L7.2,11.2c0.4-0.4,0.9-0.4,1.3-0.1l2.2,2.1c0.1,0.1,0.3,0.2,0.4,0.3l-0.2-7.3c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.8l0.2,7.3
|
|
10
|
+
c0.1-0.1,0.2-0.2,0.3-0.3l2.1-2.2c0.3-0.3,0.9-0.4,1.2,0c0.4,0.3,0.4,0.9,0,1.2L13.8,15c-1,1-2.6,1.1-3.7,0.1l-2.9-2.7
|
|
11
|
+
C6.9,12.1,6.9,11.5,7.2,11.2z M16.5,18.7l-8.8,0c-0.3,0-0.5-0.4-0.5-0.9c0-0.5,0.2-0.9,0.5-0.9l8.8,0c0.3,0,0.5,0.4,0.5,0.9
|
|
12
|
+
C17,18.3,16.8,18.7,16.5,18.7z"/>
|
|
13
|
+
</svg>
|