hr-design-system-handlebars 1.52.16 โ†’ 1.52.17

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +3 -6
  3. package/dist/assets/js/components/horizontal_scroll_container/horizontal_scroll_container.alpine.js +18 -0
  4. package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +1 -2
  5. package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +10 -1
  6. package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs +1 -2
  7. package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +10 -1
  8. package/package.json +1 -1
  9. package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.alpine.js +18 -0
  10. package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +1 -2
  11. package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +10 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v1.52.17 (Fri Jan 26 2024)
2
+
3
+ #### ๐Ÿ› Bug Fix
4
+
5
+ - Scrollpfeil bei hauptnavi sichtbar obwohl nicht nรถtig [#817](https://github.com/mumprod/hr-design-system-handlebars/pull/817) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
1
13
  # v1.52.16 (Fri Jan 26 2024)
2
14
 
3
15
  #### ๐Ÿ› Bug Fix
package/dist/assets/index.css CHANGED
@@ -1665,9 +1665,6 @@ a.link {
1665
1665
  .w-9 {
1666
1666
  width: 2.25rem;
1667
1667
  }
1668
- .w-\[1600px\] {
1669
- width: 1600px;
1670
- }
1671
1668
  .w-\[19px\] {
1672
1669
  width: 19px;
1673
1670
  }
@@ -3261,7 +3258,7 @@ a.link {
3261
3258
  border-bottom-color: var(--color-secondary-ds);
3262
3259
  }
3263
3260
  .counter-reset {
3264
- counter-reset: cnt1706271481537;
3261
+ counter-reset: cnt1706277173374;
3265
3262
  }
3266
3263
  .hyphens-auto {
3267
3264
  -webkit-hyphens: auto;
@@ -3563,7 +3560,7 @@ a.link {
3563
3560
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3564
3561
  }
3565
3562
  .-ordered {
3566
- counter-increment: cnt1706271481537 1;
3563
+ counter-increment: cnt1706277173374 1;
3567
3564
  }
3568
3565
  .-ordered::before {
3569
3566
  position: absolute;
@@ -3579,7 +3576,7 @@ a.link {
3579
3576
  letter-spacing: .0125em;
3580
3577
  --tw-text-opacity: 1;
3581
3578
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3582
- content: counter(cnt1706271481537);
3579
+ content: counter(cnt1706277173374);
3583
3580
  }
3584
3581
  /*! ****************************/
3585
3582
  /*! DataPolicy stuff */
package/dist/assets/js/components/horizontal_scroll_container/horizontal_scroll_container.alpine.js CHANGED
@@ -25,6 +25,24 @@ export default function slider() {
25
25
  checkIfScrollable(e){
26
26
  e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
27
27
  this.arrowsDisplay(e);
28
+ },
29
+ throttle(f, delay) {
30
+ let timer = 0;
31
+ return function(...args) {
32
+ clearTimeout(timer);
33
+ timer = setTimeout(() => f.apply(this, args), delay);
34
+ }
35
+ },
36
+ initialize(e) {
37
+ this.checkIfScrollable(e);
38
+
39
+ const resizeObserver = new ResizeObserver(this.throttle((entries) => {
40
+ entries.forEach(entry => {
41
+ this.checkIfScrollable(e);
42
+ });
43
+ }, 100));
44
+
45
+ resizeObserver.observe(e);
28
46
  }
29
47
  };
30
48
  }
package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs CHANGED
@@ -1,6 +1,5 @@
1
1
  <div x-data="slider()"
2
- x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
3
- @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
2
+ x-init="initialize($refs.scrollContainer_{{getRandom}})"
4
3
  class="relative w-full"
5
4
  ax-load
6
5
  x-ignore
package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs CHANGED
@@ -1,9 +1,18 @@
1
1
  <div class="w-full h-auto mb-10">
2
2
  {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
3
3
 
4
- <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
4
+ <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
5
5
  <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
6
6
  </div>
7
7
 
8
+ {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
+ </div>
10
+ <div class="w-full h-auto mb-10">
11
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
12
+
13
+ <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
14
+ <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>
15
+ </div>
16
+
8
17
  {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
18
  </div>
package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container.hbs CHANGED
@@ -1,6 +1,5 @@
1
1
  <div x-data="slider()"
2
- x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
3
- @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
2
+ x-init="initialize($refs.scrollContainer_{{getRandom}})"
4
3
  class="relative w-full"
5
4
  ax-load
6
5
  x-ignore
package/dist/views_static/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs CHANGED
@@ -1,9 +1,18 @@
1
1
  <div class="w-full h-auto mb-10">
2
2
  {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
3
3
 
4
- <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
4
+ <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
5
5
  <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
6
6
  </div>
7
7
 
8
+ {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
+ </div>
10
+ <div class="w-full h-auto mb-10">
11
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
12
+
13
+ <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
14
+ <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>
15
+ </div>
16
+
8
17
  {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
18
  </div>
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.52.16",
9
+ "version": "1.52.17",
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/horizontal_scroll_container/horizontal_scroll_container.alpine.js CHANGED
@@ -25,6 +25,24 @@ export default function slider() {
25
25
  checkIfScrollable(e){
26
26
  e.scrollWidth > e.clientWidth ? this.isScrollable=true : this.isScrollable=false;
27
27
  this.arrowsDisplay(e);
28
+ },
29
+ throttle(f, delay) {
30
+ let timer = 0;
31
+ return function(...args) {
32
+ clearTimeout(timer);
33
+ timer = setTimeout(() => f.apply(this, args), delay);
34
+ }
35
+ },
36
+ initialize(e) {
37
+ this.checkIfScrollable(e);
38
+
39
+ const resizeObserver = new ResizeObserver(this.throttle((entries) => {
40
+ entries.forEach(entry => {
41
+ this.checkIfScrollable(e);
42
+ });
43
+ }, 100));
44
+
45
+ resizeObserver.observe(e);
28
46
  }
29
47
  };
30
48
  }
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs CHANGED
@@ -1,6 +1,5 @@
1
1
  <div x-data="slider()"
2
- x-init="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
3
- @resize.window="checkIfScrollable($refs.scrollContainer_{{getRandom}})"
2
+ x-init="initialize($refs.scrollContainer_{{getRandom}})"
4
3
  class="relative w-full"
5
4
  ax-load
6
5
  x-ignore
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs CHANGED
@@ -1,9 +1,18 @@
1
1
  <div class="w-full h-auto mb-10">
2
2
  {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
3
3
 
4
- <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
4
+ <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
5
5
  <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
6
6
  </div>
7
7
 
8
+ {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
+ </div>
10
+ <div class="w-full h-auto mb-10">
11
+ {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true" _bgcolor="var(--color-navigation-bg)" _iconcolor="navigation-icons"}}
12
+
13
+ <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white bg-primary">
14
+ <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann.</p>
15
+ </div>
16
+
8
17
  {{/components/horizontal_scroll_container/horizontal_scroll_container}}
9
18
  </div>