hr-design-system-handlebars 0.77.0 → 0.77.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/build/handlebars/partials/handlebar-partials.js +5 -5
- package/dist/assets/index.css +11 -13
- package/dist/views/components/content_nav/content_nav.hbs +2 -2
- package/dist/views/components/content_nav/content_nav_container.hbs +1 -1
- package/dist/views/components/content_nav/content_nav_dropdown.hbs +3 -3
- package/dist/views/components/content_nav/content_nav_list.hbs +1 -1
- package/package.json +1 -1
- package/src/stories/views/components/content_nav/content_nav.hbs +2 -2
- package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -1
- package/src/stories/views/components/content_nav/content_nav_dropdown.hbs +3 -3
- package/src/stories/views/components/content_nav/content_nav_list.hbs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v0.77.2 (Fri Nov 04 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Dpe 1816 content nav fixes part9 [#371](https://github.com/mumprod/hr-design-system-handlebars/pull/371) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.77.1 (Fri Nov 04 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- another try to make it work in delivery [#370](https://github.com/mumprod/hr-design-system-handlebars/pull/370) ([@StefanVesper](https://github.com/StefanVesper))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v0.77.0 (Thu Nov 03 2022)
|
|
2
26
|
|
|
3
27
|
#### 🚀 Enhancement
|
|
@@ -7,11 +7,11 @@ module.exports['components/button/button.hbs'] = '<button \n {{~#if _aria}} a
|
|
|
7
7
|
module.exports['components/button/button_pseudo.hbs'] = '{{#decorator \'components/base/link\'}}\n <span\n class=\'px-4 py-2.5 border\n {{inline-switch\n _color\n \'["white","grey","blue"]\'\n \'["text-white border-white","text-grey-scorpion border-grey-scorpion","text-white bg-blue-congress","text-toplineColor border-toplineColor"]\'\n }}\n font-heading hover:bg-white hover:text-toplineColor hover:border-toplineColor\'\n >\n {{_linkTitle}}\n </span>\n{{/decorator}}'
|
|
8
8
|
module.exports['components/button/button_round.hbs'] = '{{> components/button/button \n _aria=_aria\n _isButton=_isButton\n _title=_title\n _name=_name\n _label=_label\n _value=_value\n _showIcon="true"\n _icon=_icon\n _iconmap=_iconmap\n _addIconClass="w-10 h-10 inline"\n _addClass="fill-white hover:text-white"\n _addClass2=_addClass\n _webview=_webview\n _x-show=_x-show\n _alpineClick=_alpineClick\n _srOnly=_srOnly\n}}'
|
|
9
9
|
module.exports['components/button/button_transparent.hbs'] = '{{> components/button/button \n _aria=_aria\n _isButton=_isButton\n _title=_title\n _name=_name\n _label=_label\n _value=_value\n _showIcon="true"\n _icon=_icon\n _iconmap=_iconmap\n _addIconClass=_addIconClass\n _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "\n _addClass2=_addClass\n _webview=_webview\n _x-show=_x-show\n _alpineClick=_alpineClick\n}}'
|
|
10
|
-
module.exports['components/content_nav/content_nav.hbs'] = '{{#with this.contentNav}} \n {{#if this.isListOrFlow}}\n <nav class="w-full c-content-nav">\n {{> components/content_nav/content_nav_container \n _teasersize=../_teasersize \n _maindivclass="flex flex-wrap mt-2 md:mt-0" \n _inputcontainerclass="flex bg-grey-light w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"\n }} \n </nav>\n {{else}} \n {{#decorator \'components/content_nav/content_nav_dropdown\'\n _componentClass="c-content-nav h-10
|
|
11
|
-
module.exports['components/content_nav/content_nav_container.hbs'] = '<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"\n @click.outside ="contentNavDropdownIsOpen = false; console.log(\'clicked outside\')"\n {{#if this.isAutosuggest}}\n data-hr-auto-suggest=\'{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}\'\n {{/if}}\n>\n {{#if this.isAutosuggest}}\n <div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">\n <input x-ref="autosuggestInput" \n class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"\n type="text"\n placeholder="Eintrag filtern"/>\n </div>\n {{/if}}\n\n {{> components/content_nav/content_nav_list _teasersize=_teasersize }}\n \n</div>'
|
|
12
|
-
module.exports['components/content_nav/content_nav_dropdown.hbs'] = '<nav
|
|
10
|
+
module.exports['components/content_nav/content_nav.hbs'] = '{{#with this.contentNav}} \n {{#if this.isListOrFlow}}\n <nav x-cloak class="w-full c-content-nav">\n {{> components/content_nav/content_nav_container \n _teasersize=../_teasersize \n _maindivclass="flex flex-wrap mt-2 md:mt-0" \n _inputcontainerclass="flex bg-grey-light w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"\n }} \n </nav>\n {{else}} \n {{#decorator \'components/content_nav/content_nav_dropdown\'\n _componentClass="c-content-nav h-10 md:h-auto w-full"\n _teasersize=../_teasersize\n _iconOpen="arrow-down"\n _iconClose="arrow-up"\n _buttonText=(defaultIfEmpty this.selectedItem.title ../../title)\n _hiddenNavigationLabel="Unternavigation"\n }} \n {{> components/content_nav/content_nav_container \n _teasersize=_teasersize \n _maindivclass="flex flex-col w-full mt-0" \n _inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "\n }}\n {{/decorator}}\n {{/if}}\n{{/with}} '
|
|
11
|
+
module.exports['components/content_nav/content_nav_container.hbs'] = '<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"\n @click.outside ="contentNavDropdownIsOpen = false; console.log(\'clicked outside\')"\n {{#if this.isAutosuggest}}\n data-hr-auto-suggest=\'{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}\'\n {{/if}}\n>\n {{#if this.isAutosuggest}}\n <div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">\n <input x-ref="autosuggestInput" \n class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"\n type="text"\n placeholder="Eintrag filtern"/>\n </div>\n {{/if}}\n\n {{> components/content_nav/content_nav_list _teasersize=_teasersize }}\n \n</div>'
|
|
12
|
+
module.exports['components/content_nav/content_nav_dropdown.hbs'] = '<nav x-cloak\n class="w-full px-2 md:px-0 {{_componentClass}} " \n id="dropdown--{{nextRandom}}"\n tabindex="0"\n role="navigation"\n aria-labelledby="dropdown__label--{{getRandom}}">\n\n <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>\n\n <div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n :class="contentNavDropdownIsOpen ? \'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]\' : \'\'"\n class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-1002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"\n >\n <span class="self-center w-full p-2 text-base">{{_buttonText}}</span>\n <div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">\n <span @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; " \n :class="contentNavDropdownIsOpen ? \'hidden\' : \'\'" \n class="flex self-center"\n >\n {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}} \n </span>\n <span @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; $dispatch(\'resetinput\'); " \n :class="contentNavDropdownIsOpen ? \'\' : \'hidden\'" \n class="flex self-center"\n >\n {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}\n </span>\n </div>\n </div> \n <div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" \n aria-haspopup="true"\n :class="contentNavDropdownIsOpen ? \'z-9999 w-auto md:w-full relative md:absolute\' : \' z-1003\'"\n class="md:h-auto md:overflow-visible">\n {{~decorator_body~}}\n </div>\n \n</nav>'
|
|
13
13
|
module.exports['components/content_nav/content_nav_item.hbs'] = '<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})" \nclass="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">\n {{#decorator \'components/base/link\' \n _doNavigationTracking="true" \n _clickLabelType="Contentnavigation" \n _clickLabelPrefix1=this.title \n _css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden" \n _isSelected=this.isSelected\n _selectedCssClass="is-selected"\n }}\n \n <span class="block text-base grow font-copy js-title truncate ... ">{{this.title}}</span>\n\n {{#if this.link.hasIcon}}\n {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}\n {{/if}}\n\n <span>\n {{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2" }} \n </span>\n\n {{/decorator}} \n</li>\n\n\n'
|
|
14
|
-
module.exports['components/content_nav/content_nav_list.hbs'] = '<ul class="flex flex-wrap {{#if this.isList}} {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }}
|
|
14
|
+
module.exports['components/content_nav/content_nav_list.hbs'] = '<ul class="flex flex-wrap {{#if this.isList}} w-full {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"\n :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? \'!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full mr-2 md:mr-0 \' : \'\'"\n > \n \n {{~#each this.contentNavEntries~}}\n \n {{~#if this.isGroup~}}\n \n {{#if ../isDropdown}} \n <li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">\n <div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>\n <ul class="c-content-nav__group-list !px-0 mt-0">\n {{~#each this.navigationGroup~}}\n {{> components/content_nav/content_nav_item \n _teasersize=../../_teasersize \n _isdropdown=../../isDropdown \n _ismixed=../../isMixed \n _islist=../../isList \n _isflow=../../isFlow}}\n {{~/each~}}\n </ul>\n </li> \n {{/if}}\n {{else}} \n {{> components/content_nav/content_nav_item \n _teasersize=../_teasersize \n _isdropdown=../isDropdown \n _ismixed=../isMixed \n _islist=../isList \n _isflow=../isFlow}}\n {{~/if~}}\n {{~/each~}}\n</ul>\n'
|
|
15
15
|
module.exports['components/event/instant_dates.hbs'] = '{{#if this.moreThenOneEvent}}\n {{#with this.firstInstant}}\n <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n {{/with}}\n {{#if this.moreThenTwoEvents}}\n <span class=\'text-sm font-headingSerif\'>|</span>\n {{else}}\n <span class=\'text-sm font-headingSerif\'>+</span>\n {{/if}}\n {{#with this.lastInstant}}\n <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n {{/with}}\n{{else}}\n {{#with this.firstInstant}}\n <span class=\'text-sm font-headingSerif\'>{{this.startDate.weekdayNameShort}}</span>\n <span class=\'text-2xl font-headingSerif font-bold\'>{{this.startDate.day}}</span>\n <span class=\'text-sm font-headingSerif\'>{{this.startDate.monthNameShort}}</span>\n {{/with}}\n{{/if}}'
|
|
16
16
|
module.exports['components/event/stage_location.ssi.hbs'] = '{{#with this.location}}\n<p class="flex items-center mt-4 -mb2 text-stageText font-base">\n {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-current mr-1.5 -ml-1" }}\n {{#each this}}\n {{#unless @first}}<span class="mx-3 text-stageText">|</span>{{/unless}}\n {{this}}\n {{/each}}\n</p>\n{{/with}}'
|
|
17
17
|
module.exports['components/grid/grid.hbs'] = '\n<div class="grid grid-page">\n <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">\n {{#>components/grid/grid_group _size="100"}}\n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n {{#>components/grid/grid_item _size="12"}}\n <a href="#">\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 12/12 = 100% \n </div>\n </a>\n {{/components/grid/grid_item}} \n {{/components/grid/grid_group}} \n {{#>components/grid/grid_group _backgroundColor="1"}} \n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>\n {{#>components/grid/grid_item _size="6"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="6"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div>\n {{/components/grid/grid_item}} \n {{/components/grid/grid_group}} \n\n {{#>components/grid/grid_group _size="100"}}\n\n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n {{#>components/grid/grid_item _size="6"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="6"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div>\n {{/components/grid/grid_item}} \n\n {{#>components/grid/grid_item _size="4"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="4"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div> \n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="4"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div> \n {{/components/grid/grid_item}}\n {{/components/grid/grid_group}}\n {{#>components/grid/grid_group_tabbed }}\n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>\n {{#>components/grid/grid_item _size="3"}}\n <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n 3/12 = 25% \n </div> \n {{/components/grid/grid_item}}\n \n {{#>components/grid/grid_item _size="3"}}\n <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n 3/12 = 25% \n </div> \n {{/components/grid/grid_item}}\n\n {{#>components/grid/grid_item _size="3"}}\n <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n 3/12 = 25% \n </div> \n {{/components/grid/grid_item}}\n\n {{#>components/grid/grid_item _size="3"}}\n <div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">\n 3/12 = 25% \n </div> \n {{/components/grid/grid_item}} \n \n {{/components/grid/grid_group_tabbed}} \n {{#>components/grid/grid_group}} \n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>\n {{#>components/grid/grid_item _size="4"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="4"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div> \n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="4"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div> \n {{/components/grid/grid_item}} \n {{/components/grid/grid_group}} \n {{#>components/grid/grid_group _size="50"}}\n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>\n {{#>components/grid/grid_item _size="12"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="12"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div> \n {{/components/grid/grid_item}} \n {{/components/grid/grid_group}} \n {{#>components/grid/grid_group _size="50"}}\n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>\n {{#>components/grid/grid_item _size="6"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="6"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 6/12 = 50% \n </div> \n {{/components/grid/grid_item}} \n {{/components/grid/grid_group}} \n {{#>components/grid/grid_group _size="66"}}\n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>\n {{#>components/grid/grid_item _size="12"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 8/12 = 66% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="12"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 8/12 = 66% \n </div> \n {{/components/grid/grid_item}} \n {{/components/grid/grid_group}} \n {{#>components/grid/grid_group _size="33"}}\n <h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>\n {{#>components/grid/grid_item _size="12"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div>\n {{/components/grid/grid_item}} \n {{#>components/grid/grid_item _size="12"}}\n <div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">\n 4/12 = 33% \n </div> \n {{/components/grid/grid_item}} \n {{/components/grid/grid_group}} \n </div>\n</div>\n'
|
|
@@ -20,8 +20,8 @@ module.exports['components/grid/grid_group_highlight.hbs'] = '</div>\n<div class
|
|
|
20
20
|
module.exports['components/grid/grid_group_standard.hbs'] = '<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch _size \'["100","66","50","33","25"]\' \'["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]\'}}">\n {{> @partial-block }}\n</section>'
|
|
21
21
|
module.exports['components/grid/grid_group_tabbed.hbs'] = '</div>\n<section class="grid grid-cols-12 px-8 py-8 mx-4 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">\n {{> @partial-block }}\n</section>\n<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">'
|
|
22
22
|
module.exports['components/grid/grid_item.hbs'] = '<article class="col-span-12 {{inline-switch _size \'["12","8","6","4","3"]\' \'["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]\'}}" >\n {{> @partial-block }} \n</article>'
|
|
23
|
-
module.exports['components/label/label.hbs'] = '<span\n class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n {{inline-switch\n _type\n \'["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast"]\'\n \'["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia"]\'\n }}\'\n>\n {{_text}}\n\n</span>\n{{~#with this.byline~}}\n <span class=\'ml-2 text-xs font-headingSerif {{#if ../_css}}{{../_css}}{{else}}text-grey-scorpion{{/if}}\'>\n {{~#if this.bylineSsi~}}\n {{{this.bylineSsi}}}\n {{~else~}}\n {{this.bylineText}}\n {{~/if~}}\n </span>\n{{~/with~}}'
|
|
24
23
|
module.exports['components/mediaplayer/media_player.hbs'] = '<div x-show="avStart" id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-auto js-load {{if _cypressHook _cypressHook \'js-media-element\'}} js-video-livestream" data-hr-mediaplayer-loader=\'{{json this.ardPlayerJsonConfig}}\'>\n {{#unless _hideGeotag}}\n {{~#with _geotag}}\n <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>\n {{/with~}}\n {{/unless}}\n</div>\n{{#if _isTeaser}}\n <div class="relative {{_aspectRatio}}" x-show="!avStart" > \n {{#with _teaser}}\n {{~#if ../_isCopyText~}}\n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="ar__content" _noDelay=../_noDelay ~}} \n {{else}} \n {{#decorator \'components/base/link\' _cssClasses="c-teaser__mediaLink" _isAriaHidden=true\n _doTracking=(if this.doTracking \'true\') _clickLabelPrefix1=this.realTeasersize\n _clickLabelPrefix2="mediaLink" }} \n {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType \'story\') _variant=(if this.content.imageVariant this.content.imageVariant \'100-copytext\') _addClassImg="ar__content" _noDelay=../_noDelay ~}} \n {{/decorator }}\n {{/if}}\n {{/with}}\n {{> components/button/button_round _isButton="true" _addClass=(if _isLivestream \'absolute bottom-0 right-0 my-5 mx-5 text-orange-spicyCarrot hover:fill-orange-spicyCarrot js-mediaplayer__button\' \'absolute bottom-0 right-0 my-5 mx-5 text-blue-jellyBean hover:fill-blue-jellyBean js-mediaplayer__button\') _showIcon=true _icon=_mediaButtonIcon _label=_mediaButtonLabel _srOnly="true" _alpineClick="avStart = !avStart; $dispatch(\'player_start\')"}} \n {{~#if this.isPodcast~}}\n <a href="{{this.podcastDownloadUrl}}" class="absolute top-0 right-0 m-5 js-load"{{#with\n this.trackingData}}\n data-hr-click-tracking=\'{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}\'{{/with}}>\n {{> components/base/image/icon _icon=\'download-button\' _addClass="w-10 h-10"}}\n </a>\n {{~/if~}}\n </div>\n{{/if}}'
|
|
24
|
+
module.exports['components/label/label.hbs'] = '<span\n class=\'sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading\n {{inline-switch\n _type\n \'["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast"]\'\n \'["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia"]\'\n }}\'\n>\n {{_text}}\n\n</span>\n{{~#with this.byline~}}\n <span class=\'ml-2 text-xs font-headingSerif {{#if ../_css}}{{../_css}}{{else}}text-grey-scorpion{{/if}}\'>\n {{~#if this.bylineSsi~}}\n {{{this.bylineSsi}}}\n {{~else~}}\n {{this.bylineText}}\n {{~/if~}}\n </span>\n{{~/with~}}'
|
|
25
25
|
module.exports['components/page/page.hbs'] = '<!DOCTYPE html>\n<html \n class="no-js no-js-burgerMenu preload noMicroInteraction"\n data-theme="hessenschau" \n lang="de"\n>\n <head>\n\n <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>\n <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>\n <title>hessenschau.de | Nachrichten aus Hessen</title>\n <meta name="application-name" content="hessenschau.de" />\n <meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />\n <meta name="author" content="hessenschau.de, Frankfurt, Germany" />\n <meta name="publisher" content="hessenschau.de" />\n <meta name="language" content="Deutsch" />\n\n </head>\n\n <body itemscope itemtype="http://schema.org/WebPage">\n <div class="js-pageSwap">\n \n {{> components/site_header/header }} \n \n <main \n onclick="void(0)" \n role="main" \n id="content"\n class="flex items-center justify-center"\n >\n <div class="grid grid-page">\n <div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">\n <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/teaser_standard }}\n </section>\n <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/content_nav/teaser_content_nav teasersize="100"}}\n </section>\n <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n {{> components/teaser/content_nav/teaser_content_nav teasersize="50"}}\n </section>\n <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </section>\n <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </section>\n <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div> \n <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n {{> components/teaser/teaser_standard teaserSize="33"}}\n </div>\n <div class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">\n {{> components/teaser/teaser_standard teaserSize="50"}}\n {{> components/teaser/teaser_standard teaserSize="50"}}\n </div>\n </div>\n </div>\n </main>\n\n </div>\n </body>\n</html>\n'
|
|
26
26
|
module.exports['components/site_header/burger.hbs'] = '<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">\n <nav>\n <button {{!-- :class="$store.burgeropen ? \'text-blue-congress\' : \'text-white\'" --}} \n class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"\n @burger-close.window="burgerClose()"\n @click="$store.burgeropen = !$store.burgeropen" \n @click.debounce="burgerClick()" \n aria-owns="sectionNav" \n aria-controls="sectionNav"\n x-effect="$el.setAttribute(\'aria-expanded\', $store.burgeropen);$el.setAttribute(\'aria-label\', $store.burgeropen ? \'Navigation schließen\' : \'Navigation öffnen\')"\n >\n <span class="sr-only md:hidden">Open main menu</span>\n <div class="absolute block w-6 transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current " :class="$store.burgeropen ? \'rotate-45\' : \'-mt-2\'"></span>\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'opacity-0\': $store.burgeropen } "></span>\n <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-500 ease-in-out transform bg-current" :class="{\'-rotate-45\': $store.burgeropen, \'mt-2\': ! $store.burgeropen }"></span>\n </div>\n </button>\n </nav>\n</div>\n\n<script>\n var burger = () => {\n return {\n burgerClose(){ \n this.$store.burgeropen = false\n this.$dispatch(\'toggle-sectionnav\', false); \n },\n burgerClick(){ \n this.$store.serviceNavIsOpen = false\n this.$dispatch(\'toggle-sectionnav\', this.$store.burgeropen); \n // Todo: not doing anything! can be removed?\n // this.percent > 50 ? this.removeYtranslate() : null;\n this.toggleScrolling(!this.$store.burgeropen) \n },\n removeYtranslate(){\n // Todo: not doing anything! can be removed?\n //this.$refs.serviceList.classList.remove(\'-mt-40\'); \n //this.$refs.sectionnavigation.classList.remove(\'-mt-40\')\n }\n }\n }\n</script>\n'
|
|
27
27
|
module.exports['components/site_header/header.hbs'] = '<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">\n <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm"> \n <div x-data \n id="headerWrapper"\n @resize.window="resetNav()" \n :class="shouldBrandNavBeHidden() ? \'-mt-10 lg:-mt-8\' : \'\' "\n class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">\n \n <div id="anchorNavWrapper" \n class="hidden">\n {{> components/site_header/anchor_navigation/anchor_navigation }}\n </div>\n\n <div id="brandNavWrapper" \n class="relative flex items-center justify-center order-1 w-full bg-white z-10000">\n {{> components/site_header/brand_navigation/brand_navigation }} \n </div>\n\n <div id="serviceNavWrapper" \n :class="shouldServiceNavBeHidden() ? \'-mt-40\' : \'\'"\n \n class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002"> \n <div id="serviceNavMainContainer" \n class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">\n\n <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>\n\n <div id="serviceLogoWrapper" \n class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">\n {{> components/site_header/service_logo }}\n </div>\n \n <div id="serviceItemsWrapper" \n class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">\n {{> components/site_header/service_navigation/service_list }}\n\n {{> components/site_header/navigation_search/quick_search_button }}\n\n <div class="hidden lg:flex">\n {{> components/site_header/navigation_search/quick_search_form }}\n </div>\n \n <div id="burgerWrapper" \n class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden"> \n {{> components/site_header/burger }} \n </div>\n \n </div>\n </div>\n </div>\n\n <div id="sectionNavWrapper" \n x-ref="sectionnavigation"\n @toggle-sectionnav.window="toggleSectionNav"\n :class="shouldSectionNavBeHidden() ? \'-mt-40 md:-mt-40 lg:-mt-40\' : \'\'" \n class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-22 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"\n >\n {{> components/site_header/section_navigation/section_navigation }}\n </div>\n \n <div x-cloak :class="shouldServiceNavBeHidden() ? \'hidden -mt-40\' : \'\'"\n x-effect="$el.setAttribute(\'id\', \'flyout-\' + $store.searchID.current + \'-2\');$el.setAttribute(\'aria-expanded\', $store.searchFieldOpen);$el.setAttribute(\'aria-hidden\', !$store.searchFieldOpen);$el.setAttribute(\'aria-labelledby\', \'flyout-\' + $store.searchID.current + \'-1\')" \n x-show="$store.searchFieldOpen"\n class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-10002 lg:hidden print:hidden"\n @search-close.window="$store.searchFieldOpen = false"\n @click.outside="$store.searchFieldOpen = false; $dispatch(\'search-mobile-click-outside\'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"\n x-transition:enter="transition ease-out duration-200" \n x-transition:enter-start="opacity-0 transform scale-y-90" \n x-transition:enter-end="opacity-100 transform scale-y-100" \n x-transition:leave="transition ease-in duration-100" \n x-transition:leave-start="opacity-100 transform scale-y-100" \n x-transition:leave-end="opacity-0 transform scale-y-90">\n\n {{> components/site_header/navigation_search/quick_search_form }}\n\n </div>\n \n </div> \n </header>\n <div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">\n <img loading="lazy" \n alt="{{loca "header_homepage_link_title"}}" \n src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}" \n />\n </div>\n <div x-ref="myOverlay">\n <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-10000 lg:hidden opacity-70"></div>\n </div>\n</div>\n'
|
package/dist/assets/index.css
CHANGED
|
@@ -701,9 +701,6 @@ video {
|
|
|
701
701
|
.\!m-0 {
|
|
702
702
|
margin: 0px !important;
|
|
703
703
|
}
|
|
704
|
-
.m-0 {
|
|
705
|
-
margin: 0px;
|
|
706
|
-
}
|
|
707
704
|
.m-5 {
|
|
708
705
|
margin: 1.25rem;
|
|
709
706
|
}
|
|
@@ -1586,9 +1583,6 @@ video {
|
|
|
1586
1583
|
.p-2 {
|
|
1587
1584
|
padding: 0.5rem;
|
|
1588
1585
|
}
|
|
1589
|
-
.p-0 {
|
|
1590
|
-
padding: 0px;
|
|
1591
|
-
}
|
|
1592
1586
|
.p-8 {
|
|
1593
1587
|
padding: 2rem;
|
|
1594
1588
|
}
|
|
@@ -2188,7 +2182,7 @@ video {
|
|
|
2188
2182
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2189
2183
|
}
|
|
2190
2184
|
.counter-reset {
|
|
2191
|
-
counter-reset:
|
|
2185
|
+
counter-reset: cnt1667565377169;
|
|
2192
2186
|
}
|
|
2193
2187
|
.line-clamp-4 {
|
|
2194
2188
|
overflow: hidden;
|
|
@@ -2577,7 +2571,7 @@ video {
|
|
|
2577
2571
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2578
2572
|
}
|
|
2579
2573
|
.-ordered {
|
|
2580
|
-
counter-increment:
|
|
2574
|
+
counter-increment: cnt1667565377169 1;
|
|
2581
2575
|
}
|
|
2582
2576
|
.-ordered::before {
|
|
2583
2577
|
position: absolute;
|
|
@@ -2593,7 +2587,7 @@ video {
|
|
|
2593
2587
|
letter-spacing: .0125em;
|
|
2594
2588
|
--tw-text-opacity: 1;
|
|
2595
2589
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2596
|
-
content: counter(
|
|
2590
|
+
content: counter(cnt1667565377169);
|
|
2597
2591
|
}
|
|
2598
2592
|
.\[-T\:\+Z\] {
|
|
2599
2593
|
--t: +Z;
|
|
@@ -3225,10 +3219,6 @@ video {
|
|
|
3225
3219
|
position: absolute;
|
|
3226
3220
|
}
|
|
3227
3221
|
|
|
3228
|
-
.md\:left-0 {
|
|
3229
|
-
left: 0px;
|
|
3230
|
-
}
|
|
3231
|
-
|
|
3232
3222
|
.md\:top-auto {
|
|
3233
3223
|
top: auto;
|
|
3234
3224
|
}
|
|
@@ -3241,6 +3231,10 @@ video {
|
|
|
3241
3231
|
top: 3rem;
|
|
3242
3232
|
}
|
|
3243
3233
|
|
|
3234
|
+
.md\:left-0 {
|
|
3235
|
+
left: 0px;
|
|
3236
|
+
}
|
|
3237
|
+
|
|
3244
3238
|
.md\:z-10000 {
|
|
3245
3239
|
z-index: 10000;
|
|
3246
3240
|
}
|
|
@@ -3368,6 +3362,10 @@ video {
|
|
|
3368
3362
|
height: 10.5rem;
|
|
3369
3363
|
}
|
|
3370
3364
|
|
|
3365
|
+
.md\:w-full {
|
|
3366
|
+
width: 100%;
|
|
3367
|
+
}
|
|
3368
|
+
|
|
3371
3369
|
.md\:w-1\/2 {
|
|
3372
3370
|
width: 50%;
|
|
3373
3371
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{{#with this.contentNav}}
|
|
2
2
|
{{#if this.isListOrFlow}}
|
|
3
|
-
<nav class="w-full c-content-nav">
|
|
3
|
+
<nav x-cloak class="w-full c-content-nav">
|
|
4
4
|
{{> components/content_nav/content_nav_container
|
|
5
5
|
_teasersize=../_teasersize
|
|
6
6
|
_maindivclass="flex flex-wrap mt-2 md:mt-0"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</nav>
|
|
10
10
|
{{else}}
|
|
11
11
|
{{#decorator 'components/content_nav/content_nav_dropdown'
|
|
12
|
-
_componentClass="c-content-nav h-10
|
|
12
|
+
_componentClass="c-content-nav h-10 md:h-auto w-full"
|
|
13
13
|
_teasersize=../_teasersize
|
|
14
14
|
_iconOpen="arrow-down"
|
|
15
15
|
_iconClose="arrow-up"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
|
|
1
|
+
<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
|
|
2
2
|
@click.outside ="contentNavDropdownIsOpen = false; console.log('clicked outside')"
|
|
3
3
|
{{#if this.isAutosuggest}}
|
|
4
4
|
data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<nav
|
|
1
|
+
<nav x-cloak
|
|
2
2
|
class="w-full px-2 md:px-0 {{_componentClass}} "
|
|
3
3
|
id="dropdown--{{nextRandom}}"
|
|
4
4
|
tabindex="0"
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
</div>
|
|
30
30
|
<div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
|
|
31
31
|
aria-haspopup="true"
|
|
32
|
-
:class="contentNavDropdownIsOpen ? 'z-9999 w-auto ' : ' z-1003'"
|
|
33
|
-
class="
|
|
32
|
+
:class="contentNavDropdownIsOpen ? 'z-9999 w-auto md:w-full relative md:absolute' : ' z-1003'"
|
|
33
|
+
class="md:h-auto md:overflow-visible">
|
|
34
34
|
{{~decorator_body~}}
|
|
35
35
|
</div>
|
|
36
36
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<ul class="flex flex-wrap {{#if this.isList}} {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }}
|
|
1
|
+
<ul class="flex flex-wrap {{#if this.isList}} w-full {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
|
|
2
2
|
:class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full mr-2 md:mr-0 ' : ''"
|
|
3
3
|
>
|
|
4
4
|
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "0.77.
|
|
9
|
+
"version": "0.77.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{{#with this.contentNav}}
|
|
2
2
|
{{#if this.isListOrFlow}}
|
|
3
|
-
<nav class="w-full c-content-nav">
|
|
3
|
+
<nav x-cloak class="w-full c-content-nav">
|
|
4
4
|
{{> components/content_nav/content_nav_container
|
|
5
5
|
_teasersize=../_teasersize
|
|
6
6
|
_maindivclass="flex flex-wrap mt-2 md:mt-0"
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</nav>
|
|
10
10
|
{{else}}
|
|
11
11
|
{{#decorator 'components/content_nav/content_nav_dropdown'
|
|
12
|
-
_componentClass="c-content-nav h-10
|
|
12
|
+
_componentClass="c-content-nav h-10 md:h-auto w-full"
|
|
13
13
|
_teasersize=../_teasersize
|
|
14
14
|
_iconOpen="arrow-down"
|
|
15
15
|
_iconClose="arrow-up"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
|
|
1
|
+
<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
|
|
2
2
|
@click.outside ="contentNavDropdownIsOpen = false; console.log('clicked outside')"
|
|
3
3
|
{{#if this.isAutosuggest}}
|
|
4
4
|
data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<nav
|
|
1
|
+
<nav x-cloak
|
|
2
2
|
class="w-full px-2 md:px-0 {{_componentClass}} "
|
|
3
3
|
id="dropdown--{{nextRandom}}"
|
|
4
4
|
tabindex="0"
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
</div>
|
|
30
30
|
<div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
|
|
31
31
|
aria-haspopup="true"
|
|
32
|
-
:class="contentNavDropdownIsOpen ? 'z-9999 w-auto ' : ' z-1003'"
|
|
33
|
-
class="
|
|
32
|
+
:class="contentNavDropdownIsOpen ? 'z-9999 w-auto md:w-full relative md:absolute' : ' z-1003'"
|
|
33
|
+
class="md:h-auto md:overflow-visible">
|
|
34
34
|
{{~decorator_body~}}
|
|
35
35
|
</div>
|
|
36
36
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<ul class="flex flex-wrap {{#if this.isList}} {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }}
|
|
1
|
+
<ul class="flex flex-wrap {{#if this.isList}} w-full {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
|
|
2
2
|
:class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full mr-2 md:mr-0 ' : ''"
|
|
3
3
|
>
|
|
4
4
|
|