hr-design-system-handlebars 1.50.37 → 1.50.38

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.
Files changed (28) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +20 -25
  3. package/dist/assets/js/components/site_header/flyoutHandler.alpine.js +5 -3
  4. package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +4 -4
  5. package/dist/views/components/site_header/burger.hbs +5 -5
  6. package/dist/views/components/site_header/header.hbs +5 -4
  7. package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +1 -1
  8. package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +4 -3
  9. package/dist/views/components/site_header/service_logo.hbs +7 -4
  10. package/dist/views/components/site_header/service_navigation/service_list.hbs +1 -1
  11. package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs +1 -4
  12. package/dist/views_static/components/site_header/burger.hbs +5 -5
  13. package/dist/views_static/components/site_header/header.hbs +5 -4
  14. package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs +1 -1
  15. package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs +4 -3
  16. package/dist/views_static/components/site_header/service_logo.hbs +7 -4
  17. package/dist/views_static/components/site_header/service_navigation/service_list.hbs +1 -1
  18. package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs +1 -4
  19. package/package.json +1 -1
  20. package/src/stories/views/components/site_header/burger.hbs +5 -5
  21. package/src/stories/views/components/site_header/flyoutHandler.alpine.js +5 -3
  22. package/src/stories/views/components/site_header/header.hbs +5 -4
  23. package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +4 -4
  24. package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +1 -1
  25. package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +4 -3
  26. package/src/stories/views/components/site_header/service_logo.hbs +7 -4
  27. package/src/stories/views/components/site_header/service_navigation/service_list.hbs +1 -1
  28. package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs +1 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v1.50.38 (Wed Dec 06 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Dpe 2174 navigation refactoring [#782](https://github.com/mumprod/hr-design-system-handlebars/pull/782) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
1
13
  # v1.50.37 (Wed Dec 06 2023)
2
14
 
3
15
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -1298,8 +1298,8 @@ article.indexText ul {
1298
1298
  .-mt-6 {
1299
1299
  margin-top: -1.5rem;
1300
1300
  }
1301
- .-mt-8 {
1302
- margin-top: -2rem;
1301
+ .-mt-\[33px\] {
1302
+ margin-top: -33px;
1303
1303
  }
1304
1304
  .-mt-px {
1305
1305
  margin-top: -1px;
@@ -3150,18 +3150,18 @@ article.indexText ul {
3150
3150
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3151
3151
  transition-duration: 150ms;
3152
3152
  }
3153
- .transition-all {
3154
- transition-property: all;
3153
+ .transition-\[margin-top\] {
3154
+ transition-property: margin-top;
3155
3155
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3156
3156
  transition-duration: 150ms;
3157
3157
  }
3158
- .transition-margin-top {
3159
- transition-property: margin-top;
3158
+ .transition-\[max-height\] {
3159
+ transition-property: max-height;
3160
3160
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3161
3161
  transition-duration: 150ms;
3162
3162
  }
3163
- .transition-max-height {
3164
- transition-property: max-height;
3163
+ .transition-all {
3164
+ transition-property: all;
3165
3165
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3166
3166
  transition-duration: 150ms;
3167
3167
  }
@@ -3170,15 +3170,12 @@ article.indexText ul {
3170
3170
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3171
3171
  transition-duration: 150ms;
3172
3172
  }
3173
- .delay-1000 {
3174
- transition-delay: 1000ms;
3175
- }
3176
- .delay-200 {
3177
- transition-delay: 200ms;
3178
- }
3179
3173
  .duration-100 {
3180
3174
  transition-duration: 100ms;
3181
3175
  }
3176
+ .duration-1000 {
3177
+ transition-duration: 1000ms;
3178
+ }
3182
3179
  .duration-200 {
3183
3180
  transition-duration: 200ms;
3184
3181
  }
@@ -3208,7 +3205,7 @@ article.indexText ul {
3208
3205
  border-bottom-color: var(--color-secondary-ds);
3209
3206
  }
3210
3207
  .counter-reset {
3211
- counter-reset: cnt1701862382614;
3208
+ counter-reset: cnt1701876979005;
3212
3209
  }
3213
3210
  .hyphens-auto {
3214
3211
  -webkit-hyphens: auto;
@@ -3469,7 +3466,7 @@ article.indexText ul {
3469
3466
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3470
3467
  }
3471
3468
  .-ordered {
3472
- counter-increment: cnt1701862382614 1;
3469
+ counter-increment: cnt1701876979005 1;
3473
3470
  }
3474
3471
  .-ordered::before {
3475
3472
  position: absolute;
@@ -3485,7 +3482,7 @@ article.indexText ul {
3485
3482
  letter-spacing: .0125em;
3486
3483
  --tw-text-opacity: 1;
3487
3484
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3488
- content: counter(cnt1701862382614);
3485
+ content: counter(cnt1701876979005);
3489
3486
  }
3490
3487
  /*! ****************************/
3491
3488
  /*! DataPolicy stuff */
@@ -5706,8 +5703,8 @@ article.indexText ul {
5706
5703
  margin-top: -10rem;
5707
5704
  }
5708
5705
 
5709
- .md\:-mt-8 {
5710
- margin-top: -2rem;
5706
+ .md\:-mt-\[33px\] {
5707
+ margin-top: -33px;
5711
5708
  }
5712
5709
 
5713
5710
  .md\:mb-0 {
@@ -6135,6 +6132,10 @@ article.indexText ul {
6135
6132
  .md\:filter {
6136
6133
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
6137
6134
  }
6135
+
6136
+ .md\:transition-none {
6137
+ transition-property: none;
6138
+ }
6138
6139
  .md\:ar-16-9 {
6139
6140
  aspect-ratio: 16 / 9;
6140
6141
  }
@@ -6720,12 +6721,6 @@ article.indexText ul {
6720
6721
  filter: none;
6721
6722
  }
6722
6723
 
6723
- .lg\:transition-margin-top {
6724
- transition-property: margin-top;
6725
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
6726
- transition-duration: 150ms;
6727
- }
6728
-
6729
6724
  .lg\:duration-500 {
6730
6725
  transition-duration: 500ms;
6731
6726
  }
package/dist/assets/js/components/site_header/flyoutHandler.alpine.js CHANGED
@@ -12,7 +12,7 @@ export default () => ({
12
12
  let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
13
13
  let brandNavHeight = this.percent > 0 ? 40 : 0
14
14
  if (window.innerWidth < 1024) {
15
- if (value == true) {
15
+ if (value == true) { console.log("true")
16
16
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
17
17
  this.$refs.sectionnavigation.style.maxHeight = a + 'px'
18
18
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
@@ -24,11 +24,13 @@ export default () => ({
24
24
  'px'
25
25
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
26
26
  }
27
- } else {
27
+ } else {
28
28
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
29
- this.$refs.sectionnavigation.style.overflowY = 'hidden'
29
+ this.$refs.sectionnavigation.style.overflowY = 'hidden'
30
+
30
31
  } else {
31
32
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
33
+ console.log("close is true")
32
34
  }
33
35
  }
34
36
  }
package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js CHANGED
@@ -41,10 +41,10 @@ export default () => ({
41
41
  //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
42
42
  }
43
43
  // Listeners
44
- window.addEventListener('mousedown', mouseDownHandler, false)
45
- window.addEventListener('wheel', mouseEvent, false)
46
- window.addEventListener('touchmove', mouseEvent, false)
47
- window.addEventListener('scroll', this.debounce(scrollHandler, 50), { passive: true })
44
+ window.addEventListener('mousedown', mouseDownHandler,false)
45
+ window.addEventListener('wheel', mouseEvent, {passive: true})
46
+ window.addEventListener('touchmove', mouseEvent, {passive: true})
47
+ window.addEventListener('scroll', scrollHandler, { passive: true })
48
48
  },
49
49
  //Holds the percentage of scrolled viewport
50
50
  percent: 0,
package/dist/views/components/site_header/burger.hbs CHANGED
@@ -4,17 +4,17 @@
4
4
  class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
5
5
  @burger-close.window="burgerClose()"
6
6
  @click="$store.burgeropen = !$store.burgeropen"
7
- @click.debounce="burgerClick()"
7
+ @click.nextTick="burgerClick()"
8
8
  aria-owns="sectionNav"
9
9
  aria-controls="sectionNav"
10
10
  x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
11
11
  >
12
12
  <span class="sr-only md:hidden">Open main menu</span>
13
13
  <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
14
- <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>
15
- <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>
16
- <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>
17
- </div>
14
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
15
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
16
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
17
+ </div>
18
18
  </button>
19
19
  </nav>
20
20
  </div>
package/dist/views/components/site_header/header.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  <div x-data
4
4
  id="headerWrapper"
5
5
  @resize.window="resetNav()"
6
- :class="shouldBrandNavBeHidden() ? '-mt-8 md:-mt-8' : '' "
6
+ :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
7
7
  class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
8
8
 
9
9
 
@@ -20,7 +20,7 @@
20
20
  <div id="serviceNavWrapper"
21
21
  :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
22
22
 
23
- class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
23
+ class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
24
24
  <div id="serviceNavMainContainer"
25
25
  class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
26
26
 
@@ -54,7 +54,7 @@
54
54
  x-ref="sectionnavigation"
55
55
  @toggle-sectionnav.window="toggleSectionNav"
56
56
  :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
57
- class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 print:hidden"
57
+ class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-{margin-top} lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 print:hidden"
58
58
  >
59
59
  {{> components/site_header/section_navigation/section_navigation }}
60
60
  </div>
@@ -85,6 +85,7 @@
85
85
  />
86
86
  </div>
87
87
  <div x-ref="myOverlay">
88
- <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-100 lg:hidden opacity-70"></div>
88
+ <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
89
+ class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
89
90
  </div>
90
91
  </div>
package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{#with this.subNavigation}}
2
- <div {{#unless ../this.selected}}x-cloak{{/unless}}
2
+ <div {{#unless ../this.selected}}x-cloak{{/unless}}
3
3
  x-data="flyoutHandler"
4
4
  x-ref="{{getRandom}}"
5
5
  id="flyout-{{getRandom}}"
package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs CHANGED
@@ -2,13 +2,14 @@
2
2
  <li x-data="dropdown"
3
3
  @click.outside="dropped = false"
4
4
  @close-servicemenu.window="dropped = false"
5
- :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'"
6
- class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
5
+ :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'"
6
+ class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
7
7
 
8
8
  {{#if this.isCluster ~}}
9
9
  {{!-- Gilt z.B. für REGIONEN: --}}
10
10
  <button id="button-{{nextRandom}}-1"
11
- @click.debounce.100ms="toggle(); correctFlyoutPos()"
11
+ @click="toggle()"
12
+ @click.nextTick="correctFlyoutPos()"
12
13
  @resize.window="dropped=false; correctFlyoutPos()"
13
14
  :class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
14
15
  class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
package/dist/views/components/site_header/service_logo.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <div x-cloak
6
6
  {{#if _useSticky}}
7
- class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-500 ease-in-out h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
7
+ class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
8
8
  :class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
9
9
  {{else}}
10
10
  class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
@@ -16,8 +16,8 @@
16
16
 
17
17
  <div
18
18
  {{#if _useSticky}}
19
- class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-500 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
20
- :class="`${percent}` < 50 ? 'delay-1000 opacity-100' : 'delay-200 opacity-0 hidden'"
19
+ class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
20
+ :class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
21
21
  {{else}}
22
22
  class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
23
23
  {{/if}}
@@ -26,4 +26,7 @@
26
26
  class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">
27
27
  </div>
28
28
 
29
- </a>
29
+ </a>
30
+ <script>
31
+ percent = 0
32
+ </script>
package/dist/views/components/site_header/service_navigation/service_list.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
4
4
  x-ref="serviceList"
5
5
  :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
6
- class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
6
+ class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
7
7
  >
8
8
  {{#with this.serviceNavigationSSILinks}}
9
9
  <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs CHANGED
@@ -3,17 +3,14 @@
3
3
  {{#if this.subNavigation}}
4
4
  <button
5
5
  id="{{nextRandom}}"
6
- @click.debounce.100ms="toggleServiceNav()"
6
+ @click="toggleServiceNav()"
7
7
  @click.outside="dropped = false;"
8
8
  @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
9
-
10
9
  x-data="dropdown"
11
10
  id="{{getRandom}}"
12
-
13
11
  class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
14
12
 
15
13
  :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
16
-
17
14
  aria-owns="flyout-{{getRandom}}"
18
15
  aria-controls="flyout-{{getRandom}}"
19
16
  x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"
package/dist/views_static/components/site_header/burger.hbs CHANGED
@@ -4,17 +4,17 @@
4
4
  class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
5
5
  @burger-close.window="burgerClose()"
6
6
  @click="$store.burgeropen = !$store.burgeropen"
7
- @click.debounce="burgerClick()"
7
+ @click.nextTick="burgerClick()"
8
8
  aria-owns="sectionNav"
9
9
  aria-controls="sectionNav"
10
10
  x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
11
11
  >
12
12
  <span class="sr-only md:hidden">Open main menu</span>
13
13
  <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
14
- <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>
15
- <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>
16
- <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>
17
- </div>
14
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
15
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
16
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
17
+ </div>
18
18
  </button>
19
19
  </nav>
20
20
  </div>
package/dist/views_static/components/site_header/header.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  <div x-data
4
4
  id="headerWrapper"
5
5
  @resize.window="resetNav()"
6
- :class="shouldBrandNavBeHidden() ? '-mt-8 md:-mt-8' : '' "
6
+ :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
7
7
  class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
8
8
 
9
9
 
@@ -20,7 +20,7 @@
20
20
  <div id="serviceNavWrapper"
21
21
  :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
22
22
 
23
- class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
23
+ class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
24
24
  <div id="serviceNavMainContainer"
25
25
  class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
26
26
 
@@ -54,7 +54,7 @@
54
54
  x-ref="sectionnavigation"
55
55
  @toggle-sectionnav.window="toggleSectionNav"
56
56
  :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
57
- class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 print:hidden"
57
+ class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-{margin-top} lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 print:hidden"
58
58
  >
59
59
  {{> components/site_header/section_navigation/section_navigation }}
60
60
  </div>
@@ -85,6 +85,7 @@
85
85
  />
86
86
  </div>
87
87
  <div x-ref="myOverlay">
88
- <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-100 lg:hidden opacity-70"></div>
88
+ <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
89
+ class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
89
90
  </div>
90
91
  </div>
package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{#with this.subNavigation}}
2
- <div {{#unless ../this.selected}}x-cloak{{/unless}}
2
+ <div {{#unless ../this.selected}}x-cloak{{/unless}}
3
3
  x-data="flyoutHandler"
4
4
  x-ref="{{getRandom}}"
5
5
  id="flyout-{{getRandom}}"
package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs CHANGED
@@ -2,13 +2,14 @@
2
2
  <li x-data="dropdown"
3
3
  @click.outside="dropped = false"
4
4
  @close-servicemenu.window="dropped = false"
5
- :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'"
6
- class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
5
+ :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'"
6
+ class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
7
7
 
8
8
  {{#if this.isCluster ~}}
9
9
  {{!-- Gilt z.B. für REGIONEN: --}}
10
10
  <button id="button-{{nextRandom}}-1"
11
- @click.debounce.100ms="toggle(); correctFlyoutPos()"
11
+ @click="toggle()"
12
+ @click.nextTick="correctFlyoutPos()"
12
13
  @resize.window="dropped=false; correctFlyoutPos()"
13
14
  :class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
14
15
  class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
package/dist/views_static/components/site_header/service_logo.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <div x-cloak
6
6
  {{#if _useSticky}}
7
- class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-500 ease-in-out h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
7
+ class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
8
8
  :class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
9
9
  {{else}}
10
10
  class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
@@ -16,8 +16,8 @@
16
16
 
17
17
  <div
18
18
  {{#if _useSticky}}
19
- class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-500 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
20
- :class="`${percent}` < 50 ? 'delay-1000 opacity-100' : 'delay-200 opacity-0 hidden'"
19
+ class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
20
+ :class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
21
21
  {{else}}
22
22
  class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
23
23
  {{/if}}
@@ -26,4 +26,7 @@
26
26
  class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">
27
27
  </div>
28
28
 
29
- </a>
29
+ </a>
30
+ <script>
31
+ percent = 0
32
+ </script>
package/dist/views_static/components/site_header/service_navigation/service_list.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
4
4
  x-ref="serviceList"
5
5
  :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
6
- class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
6
+ class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
7
7
  >
8
8
  {{#with this.serviceNavigationSSILinks}}
9
9
  <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs CHANGED
@@ -3,17 +3,14 @@
3
3
  {{#if this.subNavigation}}
4
4
  <button
5
5
  id="{{nextRandom}}"
6
- @click.debounce.100ms="toggleServiceNav()"
6
+ @click="toggleServiceNav()"
7
7
  @click.outside="dropped = false;"
8
8
  @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
9
-
10
9
  x-data="dropdown"
11
10
  id="{{getRandom}}"
12
-
13
11
  class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
14
12
 
15
13
  :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
16
-
17
14
  aria-owns="flyout-{{getRandom}}"
18
15
  aria-controls="flyout-{{getRandom}}"
19
16
  x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"
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": "1.50.37",
9
+ "version": "1.50.38",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/stories/views/components/site_header/burger.hbs CHANGED
@@ -4,17 +4,17 @@
4
4
  class="relative w-10 h-10 text-navigation-text tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
5
5
  @burger-close.window="burgerClose()"
6
6
  @click="$store.burgeropen = !$store.burgeropen"
7
- @click.debounce="burgerClick()"
7
+ @click.nextTick="burgerClick()"
8
8
  aria-owns="sectionNav"
9
9
  aria-controls="sectionNav"
10
10
  x-effect="$el.setAttribute('aria-expanded', $store.burgeropen);$el.setAttribute('aria-label', $store.burgeropen ? 'Navigation schließen' : 'Navigation öffnen')"
11
11
  >
12
12
  <span class="sr-only md:hidden">Open main menu</span>
13
13
  <div class="absolute block w-6 -mt-px transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
14
- <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>
15
- <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>
16
- <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>
17
- </div>
14
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current " :class="$store.burgeropen ? 'rotate-45' : '-mt-2'"></span>
15
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'opacity-0': $store.burgeropen } "></span>
16
+ <span aria-hidden="true" class="absolute block w-full h-0.5 transition duration-250 ease-in-out transform bg-current" :class="{'-rotate-45': $store.burgeropen, 'mt-2': ! $store.burgeropen }"></span>
17
+ </div>
18
18
  </button>
19
19
  </nav>
20
20
  </div>
package/src/stories/views/components/site_header/flyoutHandler.alpine.js CHANGED
@@ -12,7 +12,7 @@ export default () => ({
12
12
  let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight
13
13
  let brandNavHeight = this.percent > 0 ? 40 : 0
14
14
  if (window.innerWidth < 1024) {
15
- if (value == true) {
15
+ if (value == true) { console.log("true")
16
16
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
17
17
  this.$refs.sectionnavigation.style.maxHeight = a + 'px'
18
18
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
@@ -24,11 +24,13 @@ export default () => ({
24
24
  'px'
25
25
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
26
26
  }
27
- } else {
27
+ } else {
28
28
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
29
- this.$refs.sectionnavigation.style.overflowY = 'hidden'
29
+ this.$refs.sectionnavigation.style.overflowY = 'hidden'
30
+
30
31
  } else {
31
32
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
33
+ console.log("close is true")
32
34
  }
33
35
  }
34
36
  }
package/src/stories/views/components/site_header/header.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  <div x-data
4
4
  id="headerWrapper"
5
5
  @resize.window="resetNav()"
6
- :class="shouldBrandNavBeHidden() ? '-mt-8 md:-mt-8' : '' "
6
+ :class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
7
7
  class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
8
8
 
9
9
 
@@ -20,7 +20,7 @@
20
20
  <div id="serviceNavWrapper"
21
21
  :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
22
22
 
23
- class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
23
+ class="relative flex justify-center order-2 w-full transition-[margin-top] duration-250 ease-in-out border-b border-servicenavigation-border-color bg-navigation-bg z-120">
24
24
  <div id="serviceNavMainContainer"
25
25
  class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
26
26
 
@@ -54,7 +54,7 @@
54
54
  x-ref="sectionnavigation"
55
55
  @toggle-sectionnav.window="toggleSectionNav"
56
56
  :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
57
- class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 print:hidden"
57
+ class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-{max-height} lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width lg:transition-{margin-top} lg:duration-500 tablet:absolute tablet:top-20 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-navigation-bg z-100 print:hidden"
58
58
  >
59
59
  {{> components/site_header/section_navigation/section_navigation }}
60
60
  </div>
@@ -85,6 +85,7 @@
85
85
  />
86
86
  </div>
87
87
  <div x-ref="myOverlay">
88
- <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-100 lg:hidden opacity-70"></div>
88
+ <div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()"
89
+ class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
89
90
  </div>
90
91
  </div>
package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js CHANGED
@@ -41,10 +41,10 @@ export default () => ({
41
41
  //console.log('Scroll initiated by ' + (window.userScroll == true ? "user" : "browser"));
42
42
  }
43
43
  // Listeners
44
- window.addEventListener('mousedown', mouseDownHandler, false)
45
- window.addEventListener('wheel', mouseEvent, false)
46
- window.addEventListener('touchmove', mouseEvent, false)
47
- window.addEventListener('scroll', this.debounce(scrollHandler, 50), { passive: true })
44
+ window.addEventListener('mousedown', mouseDownHandler,false)
45
+ window.addEventListener('wheel', mouseEvent, {passive: true})
46
+ window.addEventListener('touchmove', mouseEvent, {passive: true})
47
+ window.addEventListener('scroll', scrollHandler, { passive: true })
48
48
  },
49
49
  //Holds the percentage of scrolled viewport
50
50
  percent: 0,
package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  {{#with this.subNavigation}}
2
- <div {{#unless ../this.selected}}x-cloak{{/unless}}
2
+ <div {{#unless ../this.selected}}x-cloak{{/unless}}
3
3
  x-data="flyoutHandler"
4
4
  x-ref="{{getRandom}}"
5
5
  id="flyout-{{getRandom}}"
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs CHANGED
@@ -2,13 +2,14 @@
2
2
  <li x-data="dropdown"
3
3
  @click.outside="dropped = false"
4
4
  @close-servicemenu.window="dropped = false"
5
- :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'"
6
- class="flex flex-wrap justify-start order-2 w-full list-none border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
5
+ :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'"
6
+ class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">
7
7
 
8
8
  {{#if this.isCluster ~}}
9
9
  {{!-- Gilt z.B. für REGIONEN: --}}
10
10
  <button id="button-{{nextRandom}}-1"
11
- @click.debounce.100ms="toggle(); correctFlyoutPos()"
11
+ @click="toggle()"
12
+ @click.nextTick="correctFlyoutPos()"
12
13
  @resize.window="dropped=false; correctFlyoutPos()"
13
14
  :class="dropped ? 'lg:underline lg:text-primary font-bold lg:font-normal' : 'font-normal'"
14
15
  class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 lg:pl-4 lg:pr-4 flex flex-auto w-full justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
package/src/stories/views/components/site_header/service_logo.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <div x-cloak
6
6
  {{#if _useSticky}}
7
- class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-500 ease-in-out h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
7
+ class="absolute {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg flex transition-opacity duration-250 ease-in h-10 lg:h-[3.875rem] w-12 lg:w-[3.875rem]{{/if}}"
8
8
  :class="`${percent}` < 50 ? 'opacity-0' : 'opacity-100'"
9
9
  {{else}}
10
10
  class="relative flex h-10 {{#unless _isFooter}}brand-logo-size {{/unless}} md:hidden"
@@ -16,8 +16,8 @@
16
16
 
17
17
  <div
18
18
  {{#if _useSticky}}
19
- class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-500 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
20
- :class="`${percent}` < 50 ? 'delay-1000 opacity-100' : 'delay-200 opacity-0 hidden'"
19
+ class="w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg transition-opacity duration-250 ease-in-out h-12 lg:h-[3.875rem]{{/if}}"
20
+ :class="`${percent}` < 50 ? ' opacity-100' : 'opacity-0 '"
21
21
  {{else}}
22
22
  class="md:flex hidden justify-start w-auto {{#if _isFooter}}h-10 lg:h-12 {{else}}brand-logo-size md:brand-logo-size-md lg:brand-logo-size-lg h-12 lg:h-[3.875rem]{{/if}} "
23
23
  {{/if}}
@@ -26,4 +26,7 @@
26
26
  class="w-auto h-full logo-desk" alt="{{loca "meta_application_name"}}">
27
27
  </div>
28
28
 
29
- </a>
29
+ </a>
30
+ <script>
31
+ percent = 0
32
+ </script>
package/src/stories/views/components/site_header/service_navigation/service_list.hbs CHANGED
@@ -3,7 +3,7 @@
3
3
  @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
4
4
  x-ref="serviceList"
5
5
  :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
6
- class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
6
+ class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-b border-navigation-border-color sb-service-list transition-[margin-top] -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
7
7
  >
8
8
  {{#with this.serviceNavigationSSILinks}}
9
9
  <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs CHANGED
@@ -3,17 +3,14 @@
3
3
  {{#if this.subNavigation}}
4
4
  <button
5
5
  id="{{nextRandom}}"
6
- @click.debounce.100ms="toggleServiceNav()"
6
+ @click="toggleServiceNav()"
7
7
  @click.outside="dropped = false;"
8
8
  @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
9
-
10
9
  x-data="dropdown"
11
10
  id="{{getRandom}}"
12
-
13
11
  class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
14
12
 
15
13
  :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
16
-
17
14
  aria-owns="flyout-{{getRandom}}"
18
15
  aria-controls="flyout-{{getRandom}}"
19
16
  x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('aria-label', dropped ? '{{this.text}}-Menü schließen' : '{{this.text}}-Menü öffnen')"