hr-design-system-handlebars 1.11.12 → 1.12.0

package/src/stories/views/components/grid/grid_group_highlight.hbs

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

package/src/stories/views/components/label/label_old.hbs

@@ -10,7 +10,7 @@
 
 </span>
 {{~#with this.byline~}}
-    <span class='ml-2 text-xs font-headingSerif {{#if ../_bylineCss}}{{../_bylineCss}}{{else}}text-grey-scorpion{{/if}}'>
+    <span class='ml-2 text-xs font-headingSerif {{#if ../_bylineCss}}{{../_bylineCss}}{{else}}text-gray-scorpion{{/if}}'>
         {{~#if this.bylineSsi~}}
             {{> components/base/loadSSI _context=this.context _templatePath=this.bylineSsi}}
         {{~else~}}

package/src/stories/views/components/mediaplayer/media_player.hbs

@@ -10,27 +10,9 @@
         {{#with _teaser}}
             {{~> 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=this.dontLazyload ~}}                             
         {{/with}}
-        {{> components/button/button_round 
-            _isButton="true" 
-            _addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button cy-mediaplayer-trigger'
-            _buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-media-button hover:fill-media-button')
-            _teaserType=_teaserType
-            _teaserSize=_teaserSize
-            _isMobile1to1=_isMobile1to1
-            _showIcon=true
-            _icon=_mediaButtonIcon 
-            _label=_mediaButtonLabel 
-            _srOnly="true" 
-            _alpineClick="avStart = !avStart; $dispatch('player_start')"
-            _aria=""
-            _title=""
-            _name=""
-            _value=""
-            _iconmap="icons"
-            _addIconClass=""
-            _webview=""
-            _x-show=""
-            _noFocus=""
-        }}    
+
+        {{#with this}}
+            {{> components/mediaplayer/mediaplayer_button _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=_teaserSize _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}   
+        {{/with}} 
     </div>
 {{/if}}

package/src/stories/views/components/mediaplayer/mediaplayer_button.hbs

@@ -0,0 +1,9 @@
+{{#with this}}
+    {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
+        {{#> components/base/image/icon _addClass=(appendToDefault (if _isLivestream-adjust_context "text-orange-spicyCarrot group-hover:fill-orange-spicyCarrot" "text-media-button group-hover:fill-media-button") "w-10 h-10  fill-white group-hover:text-white inline") _icon=_icon-adjust_context}}
+            {{#*inline "css"}}{{/inline}}
+        {{/components/base/image/icon}}
+        {{>components/button/components/button_label _css="sr-only" _label=_label-adjust_context}}
+    {{/components/button/button}}
+    {{#*inline "css"}}js-mediaplayer__button cy-mediaplayer-trigger group rounded-full {{> components/button/utilities/button_on_image_classes _teaserSize=_teaserSize-adjust_context _teaserType=_teaserType-adjust_context _isMobile1to1=_isMobile1to1-adjust_context}}{{/inline}}
+{{/with}}

package/src/stories/views/components/mediaplayer/mediaplayer_button.mdx

@@ -0,0 +1,82 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as MediaplayerButtonStories from './mediaplayer_button.stories'
+
+<Meta of={MediaplayerButtonStories} />
+
+export const buttonTemplate = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    {{> components/mediaplayer/mediaplayer_button _css="!static"}}
+  `)
+    return hbsTemplate({ ...args })
+}
+
+# Mediaplayer-Button
+
+-   [Übersicht](#übersicht)
+-   [Eigenschaften](#eigenschaften)
+-   [Varianten](#varianten)
+-   [Verwendung](#verwendung)
+
+## Übersicht
+
+Der Mediaplayer-Button wird verwendet, um anzuzeigen, dass in einem Teaser ein Medienelement abspielbar ist.
+Möglich sind Videos, Audios und Podcasts. Der Button steht auf dem Teaserbild und ermöglicht bei Klick auf den
+Button den Start des jeweiligen Mediums in einem Mediaplayer. Grundlage des Mediaplayer-Buttons ist die
+[Button-Komponente](?path=/docs/komponenten-buttons-button--spielplatz). Zur Vereinfachung wird diese bereits voreingestellt. Die Subkomponenten Button-Label und Button-Icon
+müssen und können nicht separat gesetzt werden.
+
+<Canvas>
+    <Story of={MediaplayerButtonStories.Spielplatz} />
+</Canvas>
+
+## Eigenschaften
+
+<ArgsTable story="Spielplatz" />
+
+## Varianten
+
+Den Mediaplayer-Button gibt es in drei Varianten (Video, Audio und Podcast).
+
+<Canvas>
+  <Story of={MediaplayerButtonStories.Video} />
+
+{' '}
+
+<Story of={MediaplayerButtonStories.Audio} />
+
+  <Story of={MediaplayerButtonStories.Podcast} />
+</Canvas>
+
+Er kann zudem mit dem Parameter `isLivestream` so konfiguriert werden, dass er eine separate
+Farbe bekommt, wenn er zum Starten von Livestreams genommen werden soll.
+
+<Canvas>
+  <Story of={MediaplayerButtonStories.VideoLivestream} />
+
+  <Story of={MediaplayerButtonStories.AudioLivestream} />
+</Canvas>
+
+## Verwendung
+
+Der Mediaplayer-Button wird mit der Handlebar Komponente `mediaplayer_button` eingebunden.
+
+### On-Demand Media
+
+Die Einbindung eines Mediaplayer-Buttons für ein On-Demand Medium erfolgt wie in folgendem Codebeispiel gezeigt.
+
+```handlebars
+    {{> components/mediaplayer/mediaplayer_button _isLivestream=false _icon="play_button" _label="Video"}}
+    {{#*inline "css"}}{{> components/button/utilities/button_on_image_classes _teaserSize="50" _teaserType="standard" _isMobile1to1=false}}{{/inline}}
+```
+
+Zu beachten ist hier, dass die Möglichkeit besteht mit dem Inline-Partial `css` dem Button noch zusätzliche in Subkomponenten ausgelagerte CSS-Klassen
+zu übergeben. In diesem Fall werden zusätzliche Klassen gesetzt, die den Button absolut positioniert auf ein Teaser-Bild setzen.
+
+### Livestream Media
+
+Die Einbindung eines Mediaplayer-Button für einen Livestream erfolgt wie in folgendem Codebeispiel gezeigt.
+
+```handlebars
+    {{> components/mediaplayer/mediaplayer_button _isLivestream=true _icon="play_button" _label="Video"}}
+    {{#*inline "css"}}{{> components/button/utilities/button_on_image_classes _teaserSize="50" _teaserType="standard" _isMobile1to1=false}}{{/inline}}
+```

package/src/stories/views/components/mediaplayer/mediaplayer_button.stories.js

@@ -0,0 +1,178 @@
+const handlebars = require('hrHandlebars')
+
+const buttonTemplate = (args, { globals: { customConditionalToolbar } }) => {
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    let hbsTemplate = handlebars.compile(`
+    {{> components/mediaplayer/mediaplayer_button _css="!static"}}
+  `)
+    return hbsTemplate({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Buttons/Mediaplayer-Button',
+
+    argTypes: {
+        _label: {
+            description: 'Label des Buttons (wird ausschließlich Screenreader Nutzern vorgelesen)',
+            control: 'text',
+        },
+
+        _icon: {
+            control: {
+                type: 'select',
+                options: ['play_button', 'audio_button', 'podcast-button'],
+            },
+
+            description: 'Das Icon des Buttons',
+        },
+
+        _isLivestream: {
+            description:
+                'Legt die Farbe des Buttons fest. Ist es ein Livestream, hat er eine andere Farbe.',
+            control: 'boolean',
+        },
+    },
+
+    parameters: {
+        controls: {
+            sort: 'alpha',
+        },
+    },
+}
+
+export const Spielplatz = {
+    render: buttonTemplate.bind({}),
+    name: 'Spielplatz',
+
+    args: {
+        _icon: 'play_button',
+        _label: 'Video',
+        _isLivestream: false,
+    },
+}
+
+export const Video = {
+    render: buttonTemplate.bind({}),
+    name: 'Video',
+
+    argTypes: {
+        _icon: {
+            control: false,
+        },
+
+        _label: {
+            control: false,
+        },
+
+        _isLivestream: {
+            control: false,
+        },
+    },
+
+    args: {
+        _icon: 'play_button',
+        _label: 'Video',
+        _isLivestream: false,
+    },
+}
+
+export const Audio = {
+    render: buttonTemplate.bind({}),
+    name: 'Audio',
+
+    argTypes: {
+        _icon: {
+            control: false,
+        },
+
+        _label: {
+            control: false,
+        },
+
+        _isLivestream: {
+            control: false,
+        },
+    },
+
+    args: {
+        _icon: 'audio_button',
+        _label: 'Audio',
+        _isLivestream: false,
+    },
+}
+
+export const Podcast = {
+    render: buttonTemplate.bind({}),
+    name: 'Podcast',
+
+    argTypes: {
+        _icon: {
+            control: false,
+        },
+
+        _label: {
+            control: false,
+        },
+
+        _isLivestream: {
+            control: false,
+        },
+    },
+
+    args: {
+        _icon: 'podcast-button',
+        _label: 'Podcast',
+        _isLivestream: false,
+    },
+}
+
+export const VideoLivestream = {
+    render: buttonTemplate.bind({}),
+    name: 'Video - Livestream',
+
+    argTypes: {
+        _icon: {
+            control: false,
+        },
+
+        _label: {
+            control: false,
+        },
+
+        _isLivestream: {
+            control: false,
+        },
+    },
+
+    args: {
+        _icon: 'play_button',
+        _label: 'Video - Livestream',
+        _isLivestream: true,
+    },
+}
+
+export const AudioLivestream = {
+    render: buttonTemplate.bind({}),
+    name: 'Audio - Livestream',
+
+    argTypes: {
+        _icon: {
+            control: false,
+        },
+
+        _label: {
+            control: false,
+        },
+
+        _isLivestream: {
+            control: false,
+        },
+    },
+
+    args: {
+        _icon: 'audio_button',
+        _label: 'Audio - Livestream',
+        _isLivestream: true,
+    },
+}

package/src/stories/views/components/modal/modal.hbs

@@ -1,5 +1,5 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\" {{this.link.cmsDocument.title}} \" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
-    <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\\" {{this.link.cmsDocument.title}} \\" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
+    <dialog class='js-modal p-0 backdrop:bg-gray-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}
         </form>

package/src/stories/views/components/site_header/brand_navigation/brand_navigation.hbs

@@ -3,7 +3,7 @@
         @resize.window="checkIfScrollable($refs.container)"
         class="sb-brand-navigation lg:container w-full md:px-5 lg:px-10 px-3.5 h-10 lg:h-8">
 
-    <div class="flex justify-center text-xs list-none text-grey-scorpion ">
+    <div class="flex justify-center text-xs list-none text-gray-scorpion ">
 
         <template x-if="isScrollable">
             <div>

package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs

@@ -16,7 +16,10 @@
         {{~#with this.overviewLink}}
             {{~#if this.link~}}
                 <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.realTeaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
-                    {{~> components/button/button_pseudo _type="hollow" _addClass="h-4 w-4 ml-2 fill-current" _showIcon="true" _icon="arrow-right" _withLink=true _buttonText=this.title _buttonCss="truncate" _linkCss="flex min-w-0"~}}
+                    {{~#> components/button/link_button _variant="secondary" _size="lg" _css="overflow-hidden"}}
+                        {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
+                        {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
+                    {{/components/button/link_button}}
                 </div>
             {{~/if~}}
         {{/with~}}

package/src/stories/views/components/teaser/cluster/teaser_cluster_byline.hbs

@@ -2,7 +2,7 @@
 {{#with this.teaserInfo}}
     {{!--Teaser-Info--}}
         {{#if this.showTeaserInfo~}}
-         <p class="mt-1 text-xs text-grey-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
+         <p class="mt-1 text-xs text-gray-scorpion font-headingSerif {{#if ../_ordered}} pl-8 {{/if}}">
             {{~#if this.showTeaserInfoSection}}
                <span>
                   {{../this.documentSection~}}

package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css=(appendToDefault (if _firstItem "ds-teaser-focus" "ds-link-clusterTeaser") "group") }} 
+{{#decorator 'components/base/link' _css=(appendToDefault (if _firstItem "ds-teaser-focus") "block group") }} 
     {{#with this.label}}
         {{#> components/label/label_group _css=(if ../_ordered "pl-8")}}
             {{> components/label/label _type=this.type _text=(loca this.loca) _css=""}}

package/src/stories/views/components/teaser/components/teaser_av_consumption_close_button.hbs

@@ -1,20 +1,6 @@
-{{> 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 z-20" 
-    _x-show="avStart" 
-    _alpineClick=(loca "close_button_alpine_click" _playerId)
-
-    _isButton="true"   
-    _buttonColor=""
-    _label=""
-    _srOnly=true
-    _aria=""
-    _name=""
-    _value=""
-    _webview=""
-    _noFocus=""
-}}
+{{#with this}}
+    {{#> components/button/button _css="absolute top-full right-0 py-3.5 px-3.5 text-blue-700 font-semibold z-20 md:hidden hover:bg-slate-300" _title="Mediaplayer schließen" _variant="tertiary" _x-show="avStart" _alpineClick=(loca "close_button_alpine_click" _playerId)}}
+        {{> components/base/image/icon _icon="arrow-up"  _addClass="w-3 h-3 fill-current"}}
+    {{/components/button/button}} 
+    {{#*inline "css"}}{{/inline}}
+{{/with}}

package/src/stories/views/components/teaser/components/teaser_byline.hbs

@@ -1,5 +1,5 @@
 {{#if this.hasByline}}
-    <p class="mt-2 text-xs text-grey-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
+    <p class="mt-2 text-xs text-gray-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
         {{!--Teaser-Info--}}
         {{~#with this.teaserInfo~}}
             {{~#if this.showTeaserInfo~}}

package/src/stories/views/components/teaser/components/teaser_image.hbs

@@ -6,20 +6,12 @@
 {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
 {{#if this.isProgram}}
     {{#if this.showMediatheksLink}}
-        {{#decorator 'components/base/link' _isAriaHidden=true}}
-            {{> components/button/button_round 
-        _isButton="true" 
-        _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
-        _buttonColor='text-media-button hover:fill-media-button'
-        _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
-        _showIcon=true 
-        _icon='play_button' 
-        _label='Sendung' 
-        _srOnly="true" 
-        _alpineClick=""
-         _noFocus="true"
-        }}    
-        {{/decorator}}
+        {{#with this}}
+            {{> components/base/image/icon _icon="play_button" _addClass="text-media-button fill-white hover:fill-media-button w-10 h-10 inline"}}
+            {{#*inline "css"~}}
+                {{~> components/button/utilities/button_on_image_classes _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=_isMobile1to1-adjust_context}}
+            {{/inline}}
+        {{/with}}
     {{/if}}
 {{/if}}
 

package/src/stories/views/components/teaser/fixtures/teaser_event_calendar_100_serif.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"teaserSize":"100","realTeaserSize":"100","title":"Konzertkalender","eventCalendar":{"months":[{"date":{"monthNameShort":"Mai","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-05-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-05-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-04-23"}}]},{"date":{"monthNameShort":"Jun","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-06-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-06-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-06-23"}}]},{"date":{"monthNameShort":"Jul","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-07-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-07-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-07-23"}}]},{"date":{"monthNameShort":"Aug","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-08-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-08-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-08-23"}}]},{"date":{"monthNameShort":"Sep","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-21"}}],"date":{"weekdayNameShort":"Di","day":"21","htmlDate":"2022-09-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-22"}}],"date":{"weekdayNameShort":"Mi","day":"22","htmlDate":"2022-09-22"}},{"date":{"weekdayNameShort":"Do","day":"23","htmlDate":"2022-09-23"},"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-23"}}],"isStartOfWeek":false}]},{"date":{"monthNameShort":"Jan","yearShort":"23"},"hasDays":true,"isCurrentMonth":true,"hasFutureEventsFromNow":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":true,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Mo","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"isSoldOut":false,"isEventFinished":false,"hasStatus":true,"statusDescriptionForLabelShort":"event_status_cancelled","ticketLink":{"link":{"url":"https://hr.de","isTargetBlank":true,"webviewUrl":"","readMoreText":""}},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}},{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-01-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-10","day":10,"weekdayNameShort":"Di","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Di","day":"10","htmlDate":"2023-01-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-01-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-01-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-01-13"}}]},{"date":{"monthNameShort":"Feb","yearShort":"23"},"hasDays":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-02-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-10","day":10,"weekdayNameShort":"Sa","monthNameShort":"Jan"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/pedro-martins-102_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/pedro-martins-102_v-16to9__small.jpg 320w, images/pedro-martins-102_v-16to9__medium.jpg 480w, images/pedro-martins-102_v-16to9__medium__extended.jpg 640w, images/pedro-martins-102_v-16to9.jpg 960w, images/pedro-martins-102_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/pedro-martins-102_v-4to3__small.jpg 320w, images/pedro-martins-102_v-4to3__medium.jpg 480w, images/pedro-martins-102_v-4to3.jpg 650w, images/pedro-martins-102_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}}}],"date":{"weekdayNameShort":"Sa","day":"10","htmlDate":"2023-02-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-02-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-02-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-02-13"}}]},{"date":{"monthNameShort":"Mär","yearShort":"23"},"hasDays":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-03-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-10","day":10,"weekdayNameShort":"Sa","monthNameShort":"Jan"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/pedro-martins-102_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/pedro-martins-102_v-16to9__small.jpg 320w, images/pedro-martins-102_v-16to9__medium.jpg 480w, images/pedro-martins-102_v-16to9__medium__extended.jpg 640w, images/pedro-martins-102_v-16to9.jpg 960w, images/pedro-martins-102_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/pedro-martins-102_v-4to3__small.jpg 320w, images/pedro-martins-102_v-4to3__medium.jpg 480w, images/pedro-martins-102_v-4to3.jpg 650w, images/pedro-martins-102_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}}}],"date":{"weekdayNameShort":"Sa","day":"10","htmlDate":"2023-03-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-03-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-03-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-03-13"}}]}],"hasSelectedEvents":true,"hasFutureEventsFromNow":true},"link":{"url":"/monatsuebersicht-100","webviewUrl":"/monatsuebersicht-100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_event","byline":{"bylineSsi":" ","bylineText":"BylineText"}}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_alternative","includeModel":{"teaserSize":"100","realTeaserSize":"100","title":"Konzertkalender","eventCalendar":{"months":[{"date":{"monthNameShort":"Mai","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-05-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-05-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-05-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-04-23"}}]},{"date":{"monthNameShort":"Jun","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-06-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-06-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-06-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-06-23"}}]},{"date":{"monthNameShort":"Jul","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-07-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-07-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-07-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-07-23"}}]},{"date":{"monthNameShort":"Aug","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-21"}}],"date":{"weekdayNameShort":"Fr","day":"21","htmlDate":"2022-08-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-22"}}],"date":{"weekdayNameShort":"Sa","day":"22","htmlDate":"2022-08-22"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-08-23"}}],"date":{"weekdayNameShort":"So","day":"23","htmlDate":"2022-08-23"}}]},{"date":{"monthNameShort":"Sep","yearShort":"22"},"hasDays":true,"days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-21"}}],"date":{"weekdayNameShort":"Di","day":"21","htmlDate":"2022-09-21"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-22"}}],"date":{"weekdayNameShort":"Mi","day":"22","htmlDate":"2022-09-22"}},{"date":{"weekdayNameShort":"Do","day":"23","htmlDate":"2022-09-23"},"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2022-09-23"}}],"isStartOfWeek":false}]},{"date":{"monthNameShort":"Jan","yearShort":"23"},"hasDays":true,"isCurrentMonth":true,"hasFutureEventsFromNow":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":true,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Mo","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"isSoldOut":false,"isEventFinished":false,"hasStatus":true,"statusDescriptionForLabelShort":"event_status_cancelled","ticketLink":{"link":{"url":"https://hr.de","isTargetBlank":true,"webviewUrl":"","readMoreText":"","cmsDocument":{"title":"Tickets Finale Landeswettbewerb Jugend jazzt","sophoraId":"finale_landeswettbewerb_jugend_jazzt_100"}}},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}},{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-01-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-10","day":10,"weekdayNameShort":"Di","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Di","day":"10","htmlDate":"2023-01-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-01-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-01-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-01-13"}}]},{"date":{"monthNameShort":"Feb","yearShort":"23"},"hasDays":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-02-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-10","day":10,"weekdayNameShort":"Sa","monthNameShort":"Jan"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/pedro-martins-102_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/pedro-martins-102_v-16to9__small.jpg 320w, images/pedro-martins-102_v-16to9__medium.jpg 480w, images/pedro-martins-102_v-16to9__medium__extended.jpg 640w, images/pedro-martins-102_v-16to9.jpg 960w, images/pedro-martins-102_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/pedro-martins-102_v-4to3__small.jpg 320w, images/pedro-martins-102_v-4to3__medium.jpg 480w, images/pedro-martins-102_v-4to3.jpg 650w, images/pedro-martins-102_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}}}],"date":{"weekdayNameShort":"Sa","day":"10","htmlDate":"2023-02-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-02-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-02-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-02-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-02-13"}}]},{"date":{"monthNameShort":"Mär","yearShort":"23"},"hasDays":true,"contentUrl":"https://localhost:6006:/hr-bigband/konzerte/veranstaltungen-112~_month-2023-01.html","days":[{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-09","day":9,"weekdayNameShort":"Fr","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}],"date":{"weekdayNameShort":"Fr","day":"9","htmlDate":"2023-03-09"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-10","day":10,"weekdayNameShort":"Sa","monthNameShort":"Jan"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/pedro-martins-102_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/pedro-martins-102_v-16to9__small.jpg 320w, images/pedro-martins-102_v-16to9__medium.jpg 480w, images/pedro-martins-102_v-16to9__medium__extended.jpg 640w, images/pedro-martins-102_v-16to9.jpg 960w, images/pedro-martins-102_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/pedro-martins-102_v-4to3__small.jpg 320w, images/pedro-martins-102_v-4to3__medium.jpg 480w, images/pedro-martins-102_v-4to3.jpg 650w, images/pedro-martins-102_v-4to3__retina.jpg 1300w"}]}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"components/event/label_byline.ssi","context":{"firstInstant":{"hasStatus":false,"statusDescriptionForLabelShort":"event_status_cancelled","startDateTime":{"date":"14.10.22","time":"20:00"}},"moreThenOneEvent":false,"countEvents":1},"bylineText":"BylineText"}}}],"date":{"weekdayNameShort":"Sa","day":"10","htmlDate":"2023-03-10"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-11"}}],"date":{"weekdayNameShort":"So","day":"11","htmlDate":"2023-03-11"}},{"isStartOfWeek":true,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-12"}}],"date":{"weekdayNameShort":"Mo","day":"12","htmlDate":"2023-03-12"}},{"isStartOfWeek":false,"hasInstants":true,"isFirstAvailable":false,"instants":[{"isDateInstant":false,"startDate":{"htmlDate":"2023-03-13"}}],"date":{"weekdayNameShort":"Di","day":"13","htmlDate":"2023-03-13"}}]}],"hasSelectedEvents":true,"hasFutureEventsFromNow":true},"link":{"url":"/monatsuebersicht-100","webviewUrl":"/monatsuebersicht-100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_event","byline":{"bylineSsi":" ","bylineText":"BylineText"}}}}}

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -20,22 +20,25 @@
     >
 
     {{!-- Button --}}
-    <button
-        x-ref="button"
-        x-on:click="toggle()"
-        :aria-expanded="open"
-        :aria-controls="$id('dropdown-button')"
-        type="button"
+    {{#with this}}
+        {{#> components/button/button _size="md" _disableButtonPress=true}}
+            {{>components/button/components/button_label _label="Abonnieren" _css="flex-1 truncate mr-2" _type="button"}}  
+            <span x-cloak x-show="open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+            <span x-show="!open" class="w-3 h-3">
+                {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
+            </span>
+        {{/components/button/button}}
+        {{#*inline "html_properties"}}
+        x-ref="button" 
+        x-on:click="toggle()" 
+        :aria-expanded="open" 
+        :aria-controls="$id('dropdown-button')" 
         :class="open ? 'drop-shadow' : ''" 
-        class="flex ds-button items-center gap-1.5 px-2 py-2 text-white shadow font-heading bg-podcast-text js-load"
-        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'>Abonnieren
-        <div x-cloak x-show="open" class="w-3 h-3">
-            {{> components/base/image/icon _icon='arrow-up' _addClass="flex self-center w-3 h-3 fill-white" }}
-        </div>
-        <div x-show="!open" class="w-3 h-3">
-            {{> components/base/image/icon _icon='arrow-down' _addClass="flex self-center w-3 h-3 fill-white" }}
-        </div>
-    </button>
+        data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastAbonnieren:ButtonClick"}]}'
+        {{/inline}}
+    {{/with}}
 
     {{!-- Flyout --}}
     <div