hr-design-system-handlebars 1.50.16 → 1.50.18

package/dist/assets/js/alpine.js

@@ -2,6 +2,7 @@ import AsyncAlpine from 'async-alpine'
 import collapse from '@alpinejs/collapse'
 import Toolkit from '@alpine-collective/toolkit'
 import Alpine from 'alpinejs'
+import intersect from '@alpinejs/intersect'
 import mainNavigationHandler from 'components/site_header/mainNavigationHandler.alpine'
 import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
 import overlayHandler from 'components/site_header/overlayHandler.alpine'
@@ -33,6 +34,7 @@ Alpine.store('serviceID', {
 })
 Alpine.store('navIsVisible', true)
 Alpine.store('subNavIsVisible', false)
+Alpine.store('footerIsVisible', false)
 
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)
@@ -43,5 +45,7 @@ Alpine.data('dropdown', dropdown)
 // Initialization of plugins
 Alpine.plugin(Toolkit)
 Alpine.plugin(collapse)
+Alpine.plugin(intersect)
+
 
 Alpine.start()

package/dist/views/components/banner/banner.storybook.hbs

@@ -0,0 +1,126 @@
+<div class="flex flex-col py-6 bg-slate-500">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung mit Struktur Navigation</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=true  }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}   
+    {{/components/banner/header/banner_wrapper }}   
+    {{~#with this.structureNav}}
+        {{> components/banner/structure_nav/structure_nav}}
+    {{/with}}       
+</div>
+<div class="flex flex-col py-6 bg-orange-500">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung ohne Struktur Navigation</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        
+        {{~> components/banner/header/banner_image }}
+    {{/components/banner/header/banner_wrapper }}         
+</div>
+<div class="flex flex-col py-6 bg-green-800">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung Mobil kein Bild</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false}}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+
+    {{#> components/banner/header/banner_wrapper _hasImage=true _hideOnMobile=true}}
+        {{#> components/banner/header/banner_overlay _hasBackground=true _hideOnMobile=true}}
+            {{#> components/banner/header/title_background _hasBackground=true}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }}
+        {{~> components/banner/header/banner_image _hideOnMobile=true }}
+        
+    {{/components/banner/header/banner_wrapper }}         
+</div>
+<div class="flex flex-col py-6 bg-white dark:bg-black ">
+    <div class="grid grid-page">
+        <h1 class="text-3xl font-title col-full sm:col-main">Maximalausprägung kein Bild</h1>
+    </div>
+    {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=false }}
+        {{> components/navigation/breadcrumb/breadcrumb }}
+    {{/components/banner/header/breadcrumb_wrapper }} 
+    {{#> components/banner/header/banner_wrapper _hasImage=false _hideOnMobile=false}}
+        {{#> components/banner/header/banner_overlay _hasBackground=false}}
+            {{#> components/banner/header/special_info _invert="true"}}
+                Montag bis Freitag von 5 bis 11.00 Uhr
+            {{/components/banner/header/special_info }}
+            {{#> components/banner/header/title_background _hasBackground=false}}
+                {{#> components/banner/header/topline }}
+                    Diese Sendung bringt euch gut in den Tag
+                {{/components/banner/header/topline }}
+                {{#> components/banner/header/headline ~}}
+                    Die hr3 Morningshow
+                    {{~#> components/banner/header/additional_info ~}}
+                        AdditionalInfo
+                    {{~/components/banner/header/additional_info ~}}
+                {{/components/banner/header/headline }}
+                {{#> components/banner/header/byline }}
+                        Aktualisiert am 03.11.23 um 12:33 Uhr
+                {{/components/banner/header/byline }}
+            {{/components/banner/header/title_background }}
+        {{/components/banner/header/banner_overlay }} 
+    {{/components/banner/header/banner_wrapper }}          
+</div>
+{{> components/top_button/top_button }}
+{{> components/footer/page_footer }}

package/dist/views/components/banner/copyright/tooltip.hbs

@@ -0,0 +1,17 @@
+<div class="absolute top-0 right-0 z-50 p-1 {{#if _hideOnMobile}}hidden lg:flex{{/if}}">
+  <figcaption class="relative flex flex-row group"> 
+    <div class="absolute items-center h-6 px-2 py-1 m-1 text-xs font-medium rounded opacity-0 pointer-events-none w-max font-headingSerif bg-white/60 dark:bg-black/60 dark:text-text-dark text-text group-hover:opacity-100 group-hover:static">
+        {{#if _captionText}}
+            <span class="block mr-1">{{_captionText}}</span>
+        {{/if}}
+        {{#if _copyrightText}}
+            <footer class="block">
+                <small class="text-xs">{{~loca "banner_image_copyright"}} {{_copyrightText}}</small>
+            </footer>   
+        {{/if}}
+    </div>
+    <button aria-hidden="true" class="inline-flex items-center justify-center w-6 h-6 m-1 leading-7 rounded text-text font-heading bg-white/80 dark:bg-black/60 dark:text-text-dark">
+        {{> components/base/image/icon _icon="copyright" _addClass="w-4 h-4 fill-text dark:fill-text-dark"}}                
+    </button>
+  </figcaption>
+</div>

package/dist/views/components/banner/header/additional_info.hbs

@@ -0,0 +1 @@
+<span class="block mt-2 text-lg font-normal sm480:text-xl md:ml-3 font-heading md:inline">{{> @partial-block }}</span>

package/dist/views/components/banner/header/banner_image.hbs

@@ -0,0 +1,13 @@
+{{#with this.bannerImage}}
+    {{#if ../bannerLink}}
+        <a href="{{../bannerLink}}">
+    {{/if}}
+    {{#unless ../_hideOnMobile }}
+        {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{else}}
+        {{~> components/base/image/responsive_image _type="banner" _variant="mobileHidden" _addClass="hidden lg:block" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}
+    {{/unless}}
+    {{#if ../bannerLink}}
+        </a>
+    {{/if}}
+{{/with}}

package/dist/views/components/banner/header/banner_overlay.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="{{#if _hideOnMobile}}lg:absolute lg:bottom-0 lg:left-0 lg:right-0 lg:z-50{{else}}absolute bottom-0 left-0 right-0 z-50 print:absolute{{/if}}">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/dist/views/components/banner/header/banner_wrapper.hbs

@@ -0,0 +1,7 @@
+<div class="grid grid-page w-full order-2{{#if _hasImage}} overflow-hidden -image{{else}} -text{{/if}}{{~#if _hideOnMobile}} -hideOnMobile{{/if}}">
+    <div role="banner" class="grid col-full sm:col-main relative{{#unless _hasImage}} mx-4 md:mx-5 lg:mx-10 border-b border-gray-boulder pb-4{{/unless}}">
+        <div class="relative {{#if _hasImage}}-hasImage{{~#if _hideOnMobile}} aspect-auto bg-white dark:bg-black{{else}} ar-16-9 sm480:ar-16-7 md:ar-100-27{{/if}}{{/if}}">
+            {{> @partial-block }}
+        </div>
+    </div>
+</div>

package/dist/views/components/banner/header/breadcrumb_wrapper.hbs

@@ -0,0 +1,6 @@
+<div class="grid grid-page {{#if _hasContentNav }}order-4{{else}}order-1 py-2 [&:has(+.-image)]:order-4 lg:[&:has(+.-image.-hideOnMobile)]:order-1 [&:has(+.-image.-hideOnMobile)]:order-1 lg:[&:has(+.-image)]:py-0 lg:[&:has(+.-image)]:-mb-9 lg:[&:has(+.-image)]:order-1 lg:[&:has(+.-image)]:pt-3 z-10 bg-white lg:bg-transparent{{/if}}">
+    <div class="col-full sm:col-main{{#if _hasContentNav }} bg-white py-2{{else}}{{/if}}">
+        {{> @partial-block }}
+    </div>
+</div>
+{{!--  --}}

package/dist/views/components/banner/header/byline.hbs

@@ -0,0 +1 @@
+<p class="block mt-3 text-xs sm480:text-sm font-headingSerif text-byline dark:text-text-dark ">{{> @partial-block }}</p>

package/dist/views/components/banner/header/headline.hbs

@@ -0,0 +1,3 @@
+<span class="block mt-2 text-3xl sm480:text-4xl font-title text-text dark:text-text-dark">
+    {{> @partial-block }}   
+</span>

package/dist/views/components/banner/header/special_info.hbs

@@ -0,0 +1,3 @@
+<span class="px-5 md:px-5 lg:px-10 py-1.5 text-sm rounded-tr-lg inline-block leading-5 font-headingSerif {{inline-switch _invert '["true","false"]' '["text-structure-nav-text bg-structure-nav","text-primary bg-white","text-primary bg-white"]'}}">
+    {{> @partial-block }}
+</span>

package/dist/views/components/banner/header/title_background.hbs

@@ -0,0 +1,3 @@
+{{#if _hasBackground}}<div class="inline-block w-full px-4 pb-3 bg-white/60 dark:bg-black/60 md:px-5 lg:px-10">{{/if}}
+    {{> @partial-block }}
+{{#if _hasBackground}}</div>{{/if}}

package/dist/views/components/banner/header/topline.hbs

@@ -0,0 +1 @@
+<span class="font-title text-lg sm480:text-xl block mt-3.5 text-text dark:text-text-dark">{{> @partial-block }}</span>

package/dist/views/components/banner/structure_nav/structure_nav.hbs

@@ -0,0 +1,34 @@
+{{#with this.contentNav}}
+    <div class="grid order-3 grid-page">       
+        <nav class="md:px-5 lg:px-10 col-full sm:col-main bg-structure-nav"
+            x-data="{ isOpen: false}">
+            <div class="relative flex flex-wrap items-center mx-auto" @click.outside="isOpen = false"> 
+                {{#> components/button/button _size="lg" _variant="tertiary" _disableButtonPress=true _alpineClick="isOpen = !isOpen" _css="md:hidden mr-2" _onBackground=true}}
+                    <span class="hidden" :class="{ 'hidden': isOpen }">
+                        {{> components/button/components/button_icon _icon="burger--weiss" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span> 
+                    <span class="hidden" :class="{ 'hidden': !isOpen }">
+                        {{> components/button/components/button_icon _icon="close" _iconmap="icons" _css="fill-structure-nav-text" }}
+                    </span>
+                {{/components/button/button}}
+                <span class="md:hidden text-structure-nav-text">{{this.title}}</span>
+                <div class="absolute z-10 w-full top-9 md:static md:block md:w-auto" id="navbar-default" 
+                    :class="isOpen ? '' : 'hidden'"
+                    >
+                    <ul class="flex flex-col font-medium bg-white md:bg-transparent md:flex-row md:space-x-3 rtl:space-x-reverse"> 
+                        {{~#each this.contentNavEntries~}}
+                            <li class="border-b border-structure-nav md:border-b-0">
+                                {{#> "components/base/link" _link=this.link _css="block w-full px-3 py-2 text-base font-bold break-words text-structure-nav-text-mobile md:text-structure-nav-text hover:underline"}}
+                                    {{this.content.title}}
+                                {{/components/base/link}}
+                                {{#*inline "css"~}}
+                                    {{#if @first }}md:pl-0{{/if}}
+                                {{~/inline}}
+                            </li>
+                        {{~/each~}}
+                    </ul>
+                </div>
+            </div>
+        </nav> 
+    </div>
+{{/with}}

package/dist/views/components/base/image/responsive_image.hbs

@@ -10,7 +10,6 @@
 '_disableNoScript' don't add no script fallback
 
 --}}
-
 {{#withParam this.responsiveImage _type _variant }}
     {{#if this.asPicture}}
         <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
@@ -26,7 +25,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -42,9 +41,11 @@
                     loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+                alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
+                class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"
+                {{~#if ../../_title}} title="{{../../_title}}"{{~/if}}
+                {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
-
     {{/if}}
 {{/withParam}}

package/dist/views/components/content/copytext/components/additionalinfo.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Additional-info-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/additional-info ~}}
+{{~/if~}} 

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

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Audio-component</div>
+{{~else~}}    
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{/if}}
+{{~/if~}} 

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

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Audioevent-Livestream-component</div>
+{{~else~}}
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{/if}}
+{{~/if~}}

package/dist/views/components/content/copytext/components/cite.hbs

@@ -0,0 +1,20 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Cite-component</div>
+{{~else~}}
+    <div class="{{#if this.paragraphProperties.[0].showFullSize }}copytext__clearBox {{else}}copytext__box{{/if}}">
+        {{~> base/a11y/hiddenText _locaTag="story_cite_intro_sr" ~}}
+        <blockquote class="cite copytext__cite">
+            <cite class="cite__text">„{{{this.text}}}“</cite>
+            {{#with this.paragraphProperties}}
+                {{#with this.[0]}}
+                    {{#with this.citeAuthor}}
+                        <span class="cite__author">
+                            {{~> base/a11y/hiddenText _locaTag="story_cite_author_sr" ~}}
+                            {{this}}</span>
+                    {{/with}}
+                {{/with}}
+            {{/with}}
+        </blockquote>
+        {{~> base/a11y/hiddenText _locaTag="story_cite_outro_sr" ~}}
+    </div>
+{{~/if~}} 

package/dist/views/components/content/copytext/components/downloadbox.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Downloadbox-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/downloadbox ~}}
+{{~/if~}} 

package/dist/views/components/content/copytext/components/externalservice.hbs

@@ -0,0 +1,61 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: External-service-component</div>
+{{~else~}}
+    {{#with this.toModel.externalService}}
+        {{#if this.externalServiceConfig.makeConfigurable}}
+            {{~> modules/externalService/externalService~}}
+        {{else}}
+            {{#if this.externalServiceConfig.embedAsIFrame}}
+                {{#if this.fixedHeight}}
+                    {{#if this.serviceUrl}}
+                        <div class="copytext__externalService">
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+                            <div class="copytext__scrollWrapper -fixedHeight"
+                                    style="height:{{this.fixedHeight}}px;">
+                                <iframe frameborder="0" width="100%" height="100%"
+                                        src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
+                                        allowfullscreen scrolling='no'></iframe>
+                            </div>
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+                            {{#with this.externalServiceCaption}}
+                                <div class="copytext__captionLine">
+                                    <span class="figcaption">{{this}}</span>
+                                </div>
+                            {{/with}}
+                        </div>
+                    {{/if}}
+                {{else}}
+                    {{#if this.serviceUrl}}
+                        <div class="copytext__externalService">
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+                            <div class="copytext__scrollWrapper">
+                                <div class="ar--{{defaultIfEmpty this.aspectRatio "auto"}}">
+                                    <iframe frameborder="0" class="ar__content" width="100%" height="100%"
+                                            src="{{{this.serviceUrl}}}" webkitallowfullscreen
+                                            mozallowfullscreen allowfullscreen></iframe>
+                                </div>
+                            </div>
+                            {{#with this.externalServiceCaption}}
+                                <div class="copytext__captionLine">
+                                    <span class="figcaption">{{this}}</span>
+                                </div>
+                            {{/with}}
+                            {{~> base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+                        </div>
+                    {{/if}}
+                {{/if}}
+            {{else}}
+                <div class="copytext__externalService">
+                    <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+                            data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
+                    </div>
+                    {{#with this.externalServiceCaption}}
+                        <div class="copytext__captionLine js-externalservice__caption">
+                            <span class="figcaption">{{this}}</span>
+                        </div>
+                    {{/with}}
+                </div>
+            {{/if}}
+        {{/if}}
+    {{/with}}
+{{~/if~}}

package/dist/views/components/content/copytext/components/faq.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: FAQ-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/faq ~}}
+{{~/if~}}

package/dist/views/components/content/copytext/components/filedownload.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: File-download-component</div>
+{{~else~}}
+    {{> modules/media/media_figure _addClass="copytext__box" _a11yIntro-loca="story_download_intro_sr" _a11yOutro-loca="story_download_outro_sr" }}
+{{~/if~}}     

package/dist/views/components/content/copytext/components/gallery.hbs

@@ -0,0 +1,7 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Gallery-component</div>
+{{~else~}}
+    {{#with this.toModel.galleryPage}}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_gallery_intro_sr" _a11yOutro-loca="story_gallery_outro_sr" }}
+    {{/with}}
+{{~/if~}}    

package/dist/views/components/content/copytext/components/headline.hbs

@@ -0,0 +1 @@
+<h2 class="clear-both text-lg sm480:text-2xl font-headingSerif mt-11 dark:text-text-dark">{{{this.text}}}</h2>

package/dist/views/components/content/copytext/components/image.hbs

@@ -0,0 +1,41 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
+{{~else~}}
+
+    {{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> modules/figure/figure
+                _cssClass="copytext__clearBox"
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _pictureAddClass="copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> modules/figure/figure
+                _cssClass="copytext__box"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _pictureAddClass="copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> modules/figure/figure
+                _cssClass="copytext__clearBox"
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar--16x9 copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> modules/figure/figure
+                _cssClass="copytext__box"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar--16x9 copytext__box__picture"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+
+{{~/if~}}

package/dist/views/components/content/copytext/components/infobox.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Infobox-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/infobox ~}}
+{{~/if~}} 

package/dist/views/components/content/copytext/components/jobposting.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Jobposting-component</div>
+{{~else~}}
+    {{~> modules/story/paragraphs/jobposting ~}}
+{{~/if~}}

package/dist/views/components/content/copytext/components/livestream.hbs

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Livestream-component</div>
+{{~else~}}
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream__outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_video_livestream__intro_sr" _a11yOutro-loca="story_video_livestream__outro_sr" }}
+    {{/if}}
+{{~/if~}} 

package/dist/views/components/content/copytext/components/map.hbs

@@ -0,0 +1,46 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Map-component</div>
+{{~else~}}
+    {{> content/geomap/page/components/map
+        _addClass="copytext__clearBox"
+        _id=this.uuid
+        _tilesURL=this.mapTilesUrl
+        _iconURLStyle1=this.markerIconUrl
+        _iconURLStyle2=this.markerIconUrlS2
+        _iconURLStyle3=this.markerIconUrlS3
+        _markerList=this.showMarkerList
+        _fixedTooltip=this.showFixedTooltip
+        _markerCluster=this.showMarkercluster
+        _showOwnLocation=this.showOwnLocation
+        _initView=this.initView
+        _initLat=this.initViewLat
+        _initLng=this.initViewLong
+        _initZoom=this.initZoom
+        _border=this.showBorders
+        _colorBorder=this.borderColor
+        _borderStrokeWeight=this.borderStrokeWeight
+        _countryFillColor=this.countryFillColor
+        _countryFillOpacity=this.countryFillOpacity
+        _colorAreasStyle1=this.polygonColor
+        _opacityAreasStyle1=this.polygonOpacity
+        _weightAreasStyle1=this.polygonWeight
+        _colorAreasStyle2=this.polygonColorS2
+        _opacityAreasStyle2=this.polygonOpacityS2
+        _weightAreasStyle2=this.polygonWeightS2
+        _colorAreasStyle3=this.polygonColorS3
+        _opacityAreasStyle3=this.polygonOpacityS3
+        _weightAreasStyle3=this.polygonWeightS3
+        _colorLinesStyle1=this.polylineColor
+        _weightLinesStyle1=this.polylineWeight
+        _colorLinesStyle2=this.polylineColorS2
+        _weightLinesStyle2=this.polylineWeightS2
+        _colorLinesStyle3=this.polylineColorS3
+        _weightLinesStyle3=this.polylineWeightS3
+        _aspectRatio=this.mapAspectRatio
+        _initZoomMax=this.initZoomMax
+        _initZoomMin=this.initZoomMin
+        _clusterMinIconURL=this.clusterMinIconUrl
+        _clusterMedIconURL=this.clusterMedIconUrl
+        _clusterMaxIconURL=this.clusterMaxIconUrl
+    }}
+{{~/if~}} 

package/dist/views/components/content/copytext/components/newsletter.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Newsletter-component</div>
+{{~else~}}
+    {{> modules/newsletter/newsletter _addClass="copytext__clearBox marginTrailer--m"}}
+{{~/if~}}    

package/dist/views/components/content/copytext/components/paragraph.hbs

@@ -0,0 +1,11 @@
+{{#each this.text.split}}
+    {{#if this.isText}}
+        <p class="mt-6 text-base sm480:text-lg dark:text-text-dark">{{{this.text}}}</p>
+    {{/if}}
+    {{#if this.isUl}}
+        <ul class="mt-6 ml-5 text-base list-disc sm480:text-lg dark:text-text-dark">{{{this.text}}}</ul>
+    {{/if}}
+    {{#if this.isOl}}
+        <ol class="mt-6 ml-5 text-base list-decimal sm480:text-lg dark:text-text-dark">{{{this.text}}}</ol>
+    {{/if}}
+{{/each}}

package/dist/views/components/content/copytext/components/podcastepisode.hbs

@@ -0,0 +1,9 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Podcast-episode-component</div>
+{{~else~}}
+    {{#if this.showFullSize.isTrue }}
+        {{> modules/media/media_figure _addClass="copytext__clearBox dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{else}}
+        {{> modules/media/media_figure _addClass="copytext__box dontPrint" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{/if}}
+{{~/if~}}

package/dist/views/components/content/copytext/components/posterteaser.hbs

@@ -0,0 +1,5 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Posterteaser-component</div>
+{{~else~}}
+    {{> modules/teaser/poster-teaser/posterTeaser-story}}
+{{~/if~}} 

package/dist/views/components/content/copytext/components/radioplaylist.hbs

@@ -0,0 +1,11 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Radioplaylist-component</div>
+{{~else~}}
+    {{#with this.toModel.songvoteParagraphBox}}
+        {{#if this.showRanking }}
+            <div class="copytext__clearBox marginTrailer--m">
+                {{{this.rankingSSI}}}
+            </div>
+        {{/if}}
+    {{/with}}
+{{~/if~}} 

package/dist/views/components/content/copytext/components/tweet.hbs

@@ -0,0 +1,7 @@
+{{~#if (isStorybook)~}}
+    <div class="mt-6 italic text-gray-dark">coming soon: Tweet-component</div>
+{{~else~}}
+    {{#with this.toModel.tweet}}
+        {{> modules/twitter/copytext_twitter _addClass="copytext__clearBox" }}
+    {{/with}}
+{{~/if~}}