hr-design-system-handlebars 1.33.3 → 1.34.0

package/dist/views/components/footer/page_footer.hbs

@@ -0,0 +1,25 @@
+<footer class="flex justify-center w-full pb-4 text-base border-t text-footer-text print:hidden bg-footer-bg border-footer-border js-pageFooter" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter" >
+    <div class="container flex lg:px-10">
+        <span class="hidden">Footer Navigation</span>
+                
+        <div class="flex flex-wrap justify-start list-none">
+            {{~> components/footer/page_footer_content ~}}
+
+            <div class="flex flex-col w-full pt-8 text-left md:items-end md:justify-between md:pl-4 md:pt-16 md:flex-row lg:pl-0">
+
+                {{> components/footer/page_footer_metadata 
+                    _hrDeLink=this.footerMetadata.hrDeLink
+                    _ardDeLink=this.footerMetadata.ardDeLink
+                    _dataProtectionLink=this.footerMetadata.dataProtectionLink
+                    _imprintLink=this.footerMetadata.imprintLink
+                    _iconName="extern"
+                }}
+                
+                <div class="flex justify-center w-auto px-4 lg:pr-0 md:h-12">
+                    {{> components/footer/page_footer_logo }}
+                </div>
+                
+            </div>
+        </div>
+    </div>
+</footer>

package/dist/views/components/footer/page_footer_column.hbs

@@ -0,0 +1,24 @@
+<nav x-data="{dropped:false}" class="w-full md:mt-4 md:mb-8">
+    <div @click="dropped = !dropped" class="flex justify-between w-full px-2 py-2 border-b border-footer-heading md:px-0 md:ml-4 md:py-0 lg:m-0">
+        
+        <span class="flex justify-start text-base font-bold text-footer-heading "  title="{{_title}}" onclick="">{{_title}}  </span>  
+        
+        <div class="flex items-center md:hidden " :class="dropped ? 'transform rotate-180':''">
+            {{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
+        </div>
+        
+    </div>
+
+    <div x-show="!$screen('lg') && !$screen('md') ? dropped : true" x-transition.opacity class="flex flex-col md:flex-row flex-nowrap">
+        {{#each _columns}} 
+            <ul class="flex flex-col text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
+                {{#each this.links}}
+                    
+                        {{> components/footer/page_footer_item  _css="hover:underline" _iconName="extern" }}
+                          
+                {{/each}}
+            </ul>
+        {{/each}}
+    </div>
+    
+</nav>

package/dist/views/components/footer/page_footer_content.hbs

@@ -0,0 +1,25 @@
+<div class="flex w-full md:w-1/2 md:w-max-1/2 md:first:pr-4 --first ">
+    {{~> components/footer/page_footer_column _columns=this.groups.[0].columns _columnSize=this.groups.[0].columnSize _title=this.groups.[0].title ~}} 
+</div>
+
+<div class="flex w-full md:w-1/4 md:w-max-1/4 -second ">
+    {{~> components/footer/page_footer_column _columns=this.groups.[1].columns _hasCookieSettings=true _title=this.groups.[1].title ~}} 
+</div> 
+
+<div class="flex flex-col w-full pt-4 md:w-1/4 md:w-max-1/4 md:pt-0 md:pr-4 lg:pr-0 -third">
+
+    <div class="pb-4 md:pt-[38px] md:mt-[38px] p-0 m-0 md:border-t border-footer-heading">
+        {{> components/footer/page_footer_search }}
+    </div>
+     
+    {{> components/footer/page_footer_social_media _columns=this.socialMedia.columns _title=this.socialMedia.title}}
+    
+    <div class="flex items-center justify-center pt-4 md:justify-end">
+        {{#> components/button/button _size="md" _css="text-footer-text border-footer-text " _variant="secondary" _onBackground="true" }}
+            {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
+            {{> components/button/components/button_label _label="Einstellungen"}}
+        {{/components/button/button}}
+    </div>
+    
+</div>
+

package/dist/views/components/footer/page_footer_item.hbs

@@ -0,0 +1,15 @@
+{{#if this.extern}}
+    <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6">
+        {{> components/footer/page_footer_nav_link  _css="flex hover:underline" _link=this _iconName="extern" }}
+    </li>
+{{else}}
+    {{#if this.paragraphed}}
+        <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap md:bg-transparent lg:pl-0 border-b-secondary md:mt-6 md:border-0 md:h-6">
+            {{> components/footer/page_footer_nav_link _site=this.site _css="hover:underline" _link=this}}
+        </li>
+    {{else}}
+        <li class="flex items-center w-full h-8 pl-4 bg-white border-b whitespace-nowrap lg:pl-0 md:bg-transparent border-b-secondary md:border-0 md:h-6 ">
+            {{> components/footer/page_footer_nav_link _link=this _site=this.site _css="flex hover:underline" }}
+        </li>
+    {{/if}}
+{{/if}}

package/dist/views/components/footer/page_footer_logo.hbs

@@ -0,0 +1,9 @@
+<div class="self-end inline-block float-right mt-8 w-fit md:mt-0">
+    <a href="{{resourceUrl "index.html"}}" title="{{loca "header_homepage_link_title"}}">
+        {{#if (configProperty "iconConfig.brandlogo.footer")}}
+            {{> components/base/image/icon _icon=(configProperty "iconConfig.brandlogo.footer") _iconmap="logo" _addClass="inline-block w-footer-logo md:w-footer-logo-md lg:w-footer-logo-lg h-footer-logo md:h-footer-logo-md lg:h-footer-logo-lg flex self-end invert-logo-footer"}}
+        {{else}}
+            {{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="inline-block bg-logo-footer rounded-logo-footer w-footer-logo md:w-footer-logo-md lg:w-footer-logo-lg h-footer-logo md:h-footer-logo-md lg:h-footer-logo-lg fill-current md:mt-2 lg:mt-1 md:flex invert-logo-footer text-footer-text"}}
+        {{/if}}
+    </a>
+</div>

package/dist/views/components/footer/page_footer_metadata.hbs

@@ -0,0 +1,87 @@
+<div class="flex flex-col self-center text-sm md:self-end w-fit md:flex-row">
+    <div class="flex justify-center w-auto md:justify-start">
+        {{#> components/base/link _link=_hrDeLink _css="flex whitespace-nowrap hover:underline"}}
+            &copy; {{{../../_hrDeLink-adjust_context.text}}} {{{../../_hrDeLink-adjust_context.currentTime.year}}}
+                {{~#if ../../_hrDeLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~../../_hrDeLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if ../../_hrDeLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=../../_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if ../../_hrDeLink-adjust_context.labelText}} aria-label="{{../../_hrDeLink-adjust_context.labelText}}"{{/if}}
+            {{#if ../../_hrDeLink-adjust_contexttitle}} title="{{../../_hrDeLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+        {{#> components/base/link _link=_ardDeLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{../../_ardDeLink-adjust_context.text}}}
+                {{~#if ../../_ardDeLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~../../_ardDeLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if ../../_ardDeLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=../../_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if ../../_ardDeLink-adjust_context.labelText}} aria-label="{{../../_ardDeLink-adjust_context.labelText}}"{{/if}}
+            {{#if ../../_ardDeLink-adjust_context.title}} title="{{../../_ardDeLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+         {{#> components/base/link _link=_dataProtectionLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{../../_dataProtectionLink-adjust_context.text}}}
+                {{~#if ../../_dataProtectionLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~../../_dataProtectionLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if ../../_dataProtectionLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=../../_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if ../../_dataProtectionLink-adjust_context.labelText}} aria-label="{{../../_dataProtectionLink-adjust_context.labelText}}"{{/if}}
+            {{#if ../../_dataProtectionLink-adjust_context.title}} title="{{../../_dataProtectionLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+
+    <span class="hidden px-2 md:flex ">|</span>
+
+    <div class="flex justify-center w-auto md:justify-start">
+         {{#> components/base/link _link=_imprintLink _css="flex whitespace-nowrap hover:underline"}}
+            {{{../../_imprintLink-adjust_context.text}}}
+                {{~#if ../../_imprintLink-adjust_context.hiddenText~}}
+                    <span class="sr-only">
+                        {{~../../_imprintLink-adjust_context.hiddenText~}}
+                    </span>
+                {{~/if~}}
+                {{~#if ../../_imprintLink-adjust_context.isTargetBlank}}
+                    <span class="inline-flex">
+                        {{> components/base/image/icon _icon=../../_iconName-adjust_context _iconmap="icons" _addClass="ml-1 w-4 h-4 fill-footer-text"}}
+                    </span>
+                {{/if~}}
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"}}
+            {{#if ../../_imprintLink-adjust_context.labelText}} aria-label="{{../../_imprintLink-adjust_context.labelText}}"{{/if}}
+            {{#if ../../_imprintLink-adjust_context.title}} title="{{../../_imprintLink-adjust_context.title}}"{{/if}}
+        {{/inline}}
+    </div>
+</div>

package/dist/views/components/footer/page_footer_nav_link.hbs

@@ -0,0 +1,18 @@
+{{#> components/base/link _link=_link _css=_css}}
+    {{ ../../_link-adjust_context.text}}
+    {{~#if  ../../_link-adjust_context.hiddenText~}}
+        <span class="sr-only">
+            {{~ ../../_link-adjust_context.hiddenText~}}
+        </span>
+    {{~/if~}}
+    {{~#if  ../../_link-adjust_context.isTargetBlank}}
+        <span class="inline-flex md:mt-0.5 md:ml-1">
+            {{> components/base/image/icon _icon=../../_iconName-adjust_context _iconmap="icons" _addClass="w-4 h-4 fill-current"}}
+        </span>
+    {{/if~}}
+{{/components/base/link}}
+{{#*inline "htmlProperties"}}
+    {{#with ../../_link-adjust_context}}
+        {{#if _link.labelText}} aria-label="{{_link.labelText}}"{{/if}}
+    {{/with}}
+{{/inline}}

package/dist/views/components/footer/page_footer_search.hbs

@@ -0,0 +1,6 @@
+<div class="relative mx-auto ">
+    <div class="flex px-8 pt-4 md:pt-0 md:px-0">
+        {{> components/site_header/navigation_search/quick_search_form }}
+    </div>
+    
+</div>

package/dist/views/components/footer/page_footer_social_media.hbs

@@ -0,0 +1,29 @@
+<nav class="block pb-0 mx-auto md:mx-0" aria-labelledby="c-footer_social_media_title" >
+    <span id="c-footer_social_media_title" class="hidden">{{_title}}</span>
+    {{#each _columns}}
+        <ul class="flex flex-row justify-end pb-2 pr-2 md:pr-0 md:last:pb-4">
+            {{#each this.links}}
+                {{#if this.extern}}
+                    <li class="pr-2 last:pr-0">
+                        {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                        {{/components/base/link}}
+                        {{#*inline "htmlProperties"}}
+                            title="{{this.title}}"
+                        {{/inline}}
+            
+                    </li>
+                {{else}}
+                    <li class="pr-2 last:pr-0">
+                        {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                        {{/components/base/link}}
+                        {{#*inline "htmlProperties"}}
+                            title="{{this.title}}"
+                        {{/inline}}
+                    </li>
+                {{/if}}
+            {{/each}}
+        </ul>
+    {{/each}}
+</nav>

package/dist/views/components/page/page.hbs

@@ -65,7 +65,7 @@
                     </div>
                 </div>
             </main>
-
+        {{!-- {{> components/footer/page_footer }}  --}}
         </div>
     </body>
 </html>

package/dist/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -19,7 +19,7 @@
             name="query" 
             x-model="query"
             placeholder='{{loca "search_input_placeholder" }}' 
-            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-primary text-primary focus:outline-none"
+            class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 rounded-l shadow-inner appearance-none lg:top-10 placeholder-text-xs placeholder-secondary text-secondary focus:outline-none"
             type="text"
             id="searchInput--{{getRandom}}"
             autocomplete="off"
@@ -31,7 +31,7 @@
             aria-controls="suggestionlist--{{getRandom}}"
         > 
         <div 
-            class="absolute left-0 w-auto min-w-full top-8 lg:top-10" 
+            class="absolute left-0 w-auto min-w-full z-100 top-8 lg:top-10" 
             x-show="query.length > 1 && active && suggestions.length"
             x-cloak
             x-transition:leave="transition ease-in duration-100"
@@ -52,7 +52,7 @@
                         <a  
                             x-bind:active="false"
                             x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
-                            x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
+                            x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full text-secondary rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
                         >
                             <span x-text="suggestion"></span>
                         </a>

package/dist/views_static/components/Button.hbs

@@ -0,0 +1,10 @@
+<button
+    class='js-load btn
+        {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}}
+        {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}'
+>
+    {{label}}
+</button>
+<div class='js-load outer' data-hr-foo='{"test":"bar"}'>
+    <div class='inner'></div>
+</div>

package/dist/views_static/components/base/image/icon.hbs

@@ -0,0 +1,72 @@
+{{!--@
+Fügt ein SVG-basiertes Icon ein.
+Das Icon wird aus einer SVG-SpriteMap bezogen.
+
+```hbs
+{{> base/image/icon
+    _icon="..."
+    _addClass="..."
+    _areHidden=[false|true*]
+    _iconTitle=""
+    _iconDesc=""
+    _iconmap=
+
+    }}
+```
+
+`_icon`         Name des Icons, das dargestellt werden soll. Entspricht der ID in der SVG-SpriteMap.
+                Diese ergibt sich durch den Dateinamen des ursprünglichen SVG-Icons.
+                *!!! Ohne Angabe eines Icon-Namens wird kein Markup erzeugt !!!*<br>
+`_addClass`     Möglichkeit zur Angabe einer zusätzlichen CSS-Klasse. `icon` ist Standard.<br>
+`_ariaHidden`   default true
+`_iconTitle`    Title Element für SVG inklusive Aria Verknüpfung
+`_iconDesc`     Description für SVG inklusive Aria Verknüpfung. Ohne iconTitle wird iconDesc nicht ausgespielt
+`_iconmap`      Benennt das Unterverzeichnis, unter dem nach der SVG-SpriteMap gesucht wird.
+                Die SVG-SpriteMap hat immer den Namen "svgmap.min.svg".
+                Default ist `icons` (entspricht dem Standard-Icon-Set)<br>
+`_overlayIcon`  Erlaubt die Angabe eines zweiten Icon-Names, der über das erste gelegt wird.
+                Es wird davon ausgegangen, das das Overlay sich in der gleichen SVG-SpriteMap befindet.<br>
+
+Beispielaufruf:
+```hbs
+{{> base/image/icon _icon="arrow-up"}}
+```
+
+TODOs zu einem späteren Zeitpunkt:
+
+Erklärung / Hinweise / Best Practices für "Accessible SVG":
+- http://www.sitepoint.com/tips-accessible-svg/
+- http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/
+
+--}}
+{{#if _icon}}
+<svg class="sb-icon {{~#if _addClass }} {{_addClass}}{{/if}} {{#if _webview}} -webview{{/if}} {{#>css}}{{/css}}" role="presentation" aria-hidden="{{defaultIfEmpty _ariaHidden true}}"
+{{#if brand}} data-brand="{{brand}}"{{/if}}
+        {{~#if _iconTitle }} {{changeRandom~}}
+            aria-labelledby="iconTitle--{{getRandom}}"
+            {{~#if _iconDesc }} aria-describedby="iconDesc--{{getRandom}}"{{~/if~}}
+        {{~/if~}}>
+
+    {{~#if _iconTitle ~}}
+        <title id="iconTitle--{{getRandom}}">{{_iconTitle}}</title>
+        {{~#if _iconDesc ~}}
+            <description id="iconDesc--{{getRandom}}">{{_iconDesc}}</description>
+        {{~/if~}}
+    {{~/if~}}
+
+    {{~#if _iconText ~}}
+        <g>
+            <svg>
+    {{~/if~}}
+
+        <use xlink:href="{{resourceUrl (replaceTokens "assets/base/icons/{0}/svgmap.min.svg" (defaultIfEmpty _iconmap "icons") ) _brand=(if this.brand this.brand)}}#{{_icon}}"></use>
+        {{#if _overlayIcon }}
+            <use xlink:href="{{resourceUrl (replaceTokens "assets/base/icons/{0}/svgmap.min.svg" (defaultIfEmpty _iconmap "icons") ) _brand=(if this.brand this.brand)}}#{{_overlayIcon}}"></use>
+        {{/if}}
+    {{~#if _iconText ~}}
+            </svg>
+        </g>
+        <text dy="0.35em" y="50%" x="50%">{{_iconText}}</text>
+    {{~/if~}}
+</svg>
+{{~/if}}

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

@@ -0,0 +1,50 @@
+{{!--
+
+`_type`
+`_variant`
+`_alttext`       Alternativ-Text des Bildes.<br>
+`_addClass`      Möglichkeit zur Angabe einer zusätzlichen CSS-Klasse. `image` ist Standard.<br>
+`_addClassImg`
+`_noDelay`       Bilder ohne verzögerung anzeigen, also direkt ins dom schreiben
+`_errorHandler`  JavaScript-Code, der ausgeführt wird, wenn das Bild nicht geladen werden kann. Wird z.B. für Fehlerhandling für EDP-Images genutzt.<br>
+'_disableNoScript' don't add no script fallback
+
+--}}
+
+{{#withParam this.responsiveImage _type _variant }}
+    {{#if this.asPicture}}
+        <picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
+            {{#unless _disableNoScript}}
+                <noscript>
+                    <img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
+                </noscript>
+            {{/unless}}
+            {{#with this.sources}}
+                {{#each this}}
+                    <source{{#with this.media}} media="{{this}}"{{/with}}
+                           {{#with this.sizes}} sizes="{{this}}"{{/with}}
+                           {{#with this.srcset}} srcset="{{this}}"{{/with}}>
+                {{/each}}
+            {{/with}}
+                <img class="{{~#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}}>
+        </picture>
+    {{/if}}
+
+    {{#if this.asImage}}
+        {{#with this.sources.[0]}}
+            {{~#with ../../_addClass }}<div class="{{this}}">{{/with}}
+            {{#unless ../../_disableNoScript}}
+                <noscript>
+                    <img class="{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
+                </noscript>
+            {{/unless}}
+            <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
+                    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="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
+            {{~#with ../../_addClass }}</div>{{/with}}
+        {{/with}}
+
+    {{/if}}
+{{/withParam}}

package/dist/views_static/components/base/link.hbs

@@ -0,0 +1,8 @@
+<a {{#with _link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{_link.url}}{{#if this.hasComments}}#commentList{{/if}}"
+    class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
+    {{#if _link.isTargetBlank}} target="_blank"  rel="noopener{{#if _link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
+    {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
+    {{#> htmlProperties}}{{/htmlProperties}}
+>
+    {{> @partial-block }}
+</a>

package/dist/views_static/components/base/loadSSI.hbs

@@ -0,0 +1,5 @@
+{{#if (isStorybook)}}  
+    {{> components/base/load_dynamic _context=_context _templatePath=_templatePath}} 
+{{else}}
+    {{{this}}}
+{{/if}}        

package/dist/views_static/components/base/load_dynamic.hbs

@@ -0,0 +1,47 @@
+{{#switch _templatePath}}
+    {{#case "components/teaser/content_nav/teaser_content_nav"}}
+        {{> components/teaser/content_nav/teaser_content_nav}}
+    {{/case}}
+    {{#case "components/site_header/service_navigation/service_navigation_item"}}
+        {{> components/site_header/service_navigation/service_navigation_item}}
+    {{/case}}
+    {{#case "components/teaser/group_teaser/group_teaser"}}
+        {{> components/teaser/group_teaser/group_teaser}}
+    {{/case}}
+    {{#case "components/teaser/tabbox/group_tabbox"}}
+        {{> components/teaser/tabbox/group_tabbox}}
+    {{/case}}
+    {{#case "components/teaser/tabbox/teaser_tabbox"}}
+        {{> components/teaser/tabbox/teaser_tabbox}}
+    {{/case}}
+    {{#case "components/teaser/cluster/teaser_cluster"}}
+        {{> components/teaser/cluster/teaser_cluster}}
+    {{/case}}
+    {{#case "components/teaser/teaser_standard"}}
+        {{> components/teaser/teaser_standard}}
+    {{/case}}
+    {{#case "components/teaser/teaser_alternativ"}}
+        {{> components/teaser/teaser_alternativ}}
+    {{/case}}
+    {{#case "components/teaser/components/teaser_comments"}}
+        {{> components/teaser/components/teaser_comments}}
+    {{/case}}
+    {{#case "components/event/stage_location.ssi"}}
+        {{> components/event/stage_location.ssi}}
+    {{/case}}
+    {{#case "components/event/label_byline.ssi"}}
+        {{> components/event/label_byline.ssi _context}}
+    {{/case}}
+    {{#case "components/program/label_byline.ssi"}}
+        {{> components/program/label_byline.ssi _context}}
+    {{/case}}
+    {{#case "components/multimedia/livestream/label_byline.ssi"}}
+        {{> components/multimedia/livestream/label_byline.ssi _context}}
+    {{/case}}
+    {{#case "components/teaser/ticker/teaser_ticker"}}
+        {{> components/teaser/ticker/teaser_ticker}}
+    {{/case}}
+    {{#case "components/navigation/breadcrumb/breadcrumb_items.ssi"}}
+        {{> components/navigation/breadcrumb/breadcrumb_items.ssi }}
+    {{/case}}
+{{/switch}}

package/dist/views_static/components/button/button.hbs

@@ -0,0 +1,16 @@
+<button
+    {{#if _id}} id="{{_id}}"{{/if}} 
+    class="ds-button {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress _disabled=_disabled}} {{> components/button/utilities/button_dimension_classes _size=_size}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}{{#if _openModal}} js-modalButton{{/if}}"
+    {{#if _openModal}} aria-haspopup="true"{{/if}}
+    {{~#if _ariaLabel}} aria-label="{{_ariaLabel}}"{{/if}}
+    type="{{defaultIfEmpty _type "submit"}}"
+    {{~#if _name}} name="{{_name}}"{{/if}} 
+    {{~#if _title}} title="{{_title}}"{{/if}}
+    {{~#if _value}} value="{{_value}}"{{/if}} 
+    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
+    {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 
+    {{~#if _noFocus}} tabindex="-1"{{/if}}
+    {{~#if _disabled~}} disabled{{/if}}
+    {{#> htmlProperties}}{{/htmlProperties}}>
+    {{> @partial-block }}
+</button>

package/dist/views_static/components/button/components/button_icon.hbs

@@ -0,0 +1,2 @@
+{{> components/base/image/icon _addClass=(appendToDefault _css "ds-button-icon w-4 h-4 fill-current") _icon=_icon _iconmap=_iconmap}}
+{{#*inline "css"}}{{/inline}}

package/dist/views_static/components/button/components/button_label.hbs

@@ -0,0 +1 @@
+<span class='ds-button-label text-base {{_css}}'>{{_label}}</span>

package/dist/views_static/components/button/link_button.hbs

@@ -0,0 +1,6 @@
+{{#> components/base/link _link=_link _css=_css _isAriaHidden=_isAriaHidden}}
+    {{> @partial-block }}
+{{/components/base/link}}
+{{#*inline "css"~}}
+    {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=_variant _onBackground=_onBackground _disableButtonPress=_disableButtonPress _disabled=_disabled}} {{> components/button/utilities/button_dimension_classes _size=_size~}}
+{{~/inline}}

package/dist/views_static/components/button/top_topics_button.hbs

@@ -0,0 +1,10 @@
+{{#with this}}
+    {{#> components/base/link _link=this.link _css="inline-flex items-center link-focus-inset-white lg:mb-0.5"}}
+        <span class="rounded-full font-copy my-2 pt-0.5 px-1.5 whitespace-nowrap leading-5 {{> components/button/utilities/button_variation_classes _variant="primary" _onBackground="true"}}">
+            {{> @partial-block }}
+        </span>
+    {{/components/base/link}}
+    {{#*inline "htmlProperties"}}
+        {{> components/tracking/navigation_tracking _clickLabelType="TopThemenNavigation" _clickLabelPrefix1=this.title}}
+    {{/inline}}
+{{/with}}

package/dist/views_static/components/button/utilities/button_base_classes.hbs

@@ -0,0 +1 @@
+inline-flex items-center font-heading

package/dist/views_static/components/button/utilities/button_dimension_classes.hbs

@@ -0,0 +1,5 @@
+{{~inline-switch
+    _size
+    '["sm","md","lg"]'
+    '[" px-2 py-0.5 min-w-7 justify-center"," p-2 min-w-10 justify-center"," px-4 py-2.5 min-w-11 justify-center",""]'
+~}}

package/dist/views_static/components/button/utilities/button_on_image_classes.hbs

@@ -0,0 +1,45 @@
+absolute bottom-0 right-0
+{{~#switch _teaserType~}}
+    {{~#case 'standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4"]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-standard'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-2 md:m-3"," m-2 md:m-4 "]'~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'tabbox-alternative'~}}
+        {{~#if _isMobile1to1~}}
+            {{~inline-switch
+                _teaserSize
+                '["hero","100","50"]'
+                '[" m-2 md:m-4"," m-2 md:m-3"," m-2"]'
+            ~}}
+        {{~else~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+        {{~/if~}}
+    {{~/case~}}
+    {{~#case 'ticker-standard'~}}
+            {{~inline-switch _teaserSize '["25","33"]' '[" m-2"," m-4 md:m-3"," m-4"]'~}}   
+    {{~/case~}}
+    {{~#case 'ticker-alternative'~}}
+            {{~inline-switch _teaserSize '["hero","100","50"]' '[" m-4"," m-2 md:m-3"," m-2"]'~}}
+    {{~/case~}}
+{{~/switch~}}

package/dist/views_static/components/button/utilities/button_variation_classes.hbs

@@ -0,0 +1,22 @@
+{{#if _onBackground~}}
+     {{inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark  hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark  hover:text-button--dark hover:border-button-inverted--dark  active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
+    ~}}
+   {{else if _disabled~}}
+
+    {{inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-disabled--dark bg-button-disabled border-button-disabled "," border text-button-disabled--dark border-button-disabled  "," bg-transparent border-transparent text-button-disabled--dark "," border text-button-disabled--dark bg-button-disabled border-button-disabled "]'
+    ~}}
+    
+{{else}}
+    {{~inline-switch
+        _variant
+        '["primary","secondary","tertiary"]'
+        '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark   hover:border-button--dark  active:bg-button--dark "]'
+    ~}}
+{{/if}}
+{{~#unless _disableButtonPress}} active:scale-95{{/unless}}