@statistikzh/leu 0.24.0 → 0.24.2

package/src/components/range/test/range.test.ts

@@ -166,4 +166,63 @@ describe("LeuRange", () => {
     const input = el.shadowRoot?.querySelector("input")
     expect(input).to.have.attribute("disabled")
   })
+
+  it("clamps and rounds when value is set", async () => {
+    const el = await defaultFixture({ min: 0, max: 10, step: 3 })
+
+    el.value = "8"
+    await el.updateComplete
+
+    expect(el.value).to.equal("9")
+  })
+
+  it("re-normalizes when min/max/step changes", async () => {
+    const el = await defaultFixture({ min: 0, max: 10, step: 2 })
+
+    el.value = "9"
+    await el.updateComplete
+
+    expect(el.value).to.equal("10")
+
+    el.max = 6
+    await el.updateComplete
+
+    expect(el.value).to.equal("6")
+  })
+
+  it("sets the second handle to min when multiple and a single value is provided", async () => {
+    const el = await defaultFixture({
+      multiple: true,
+      min: 10,
+      max: 100,
+      value: 20,
+    })
+
+    expect(el.value).to.equal("10,20")
+
+    el.value = "30"
+    await el.updateComplete
+    expect(el.value).to.equal("10,30")
+
+    el.value = "30, 40"
+    await el.updateComplete
+    expect(el.value).to.equal("30,40")
+  })
+
+  it("re-normalizes both values when multiple and min/max/step changes", async () => {
+    const el = await defaultFixture({
+      multiple: true,
+      min: 0,
+      max: 10,
+      step: 2,
+      value: "3,7",
+    })
+
+    expect(el.value).to.equal("4,8")
+
+    el.max = 6
+    await el.updateComplete
+
+    expect(el.value).to.equal("4,6")
+  })
 })

package/src/components/scroll-top/scroll-top.css

@@ -1,14 +1,30 @@
+@import url("../../styles/custom-media.css");
+
 .scroll-top {
   overflow: hidden;
   position: fixed;
-  right: 1.5rem;
-  z-index: 1099;
-  bottom: 8.125rem;
+  z-index: var(--leu-z-index-scroll-top);
+
+  --_space: 1.5rem;
+  right: var(--_space);
+  bottom: var(--_space);
 
   /* show */
-  height: 50px;
+  height: 3rem;
   pointer-events: auto;
   transition: height, bottom 0.9s, 0.6s ease;
+
+  @media (--viewport-regular) {
+    --_space: 2rem;
+  }
+
+  @media (--viewport-large) {
+    --_space: 2.5rem;
+  }
+
+  @media (--viewport-xlarge) {
+    --_space: 3rem;
+  }
 }
 
 .hide {

package/src/lib/utils.ts

@@ -4,7 +4,7 @@
  * @param {Number} timeout - Default is 500 ms
  * @returns {Function} - Your function wrapped in a timeout function
  */
-const debounce = function debounce(func, timeout = 500) {
+export const debounce = function debounce(func, timeout = 500) {
   let timer = null
   return (...args) => {
     clearTimeout(timer)
@@ -20,7 +20,7 @@ const debounce = function debounce(func, timeout = 500) {
  * @param {Number} timeout - Default is 500 ms
  * @returns {Function} - Your function wrapped in a timeout function
  */
-const throttle = function throttle(func, timeout = 500) {
+export const throttle = function throttle(func, timeout = 500) {
   let timer = null
   return (...args) => {
     if (timer === null) {
@@ -32,4 +32,14 @@ const throttle = function throttle(func, timeout = 500) {
   }
 }
 
-export { debounce, throttle }
+/**
+ * Clamp a number between a minimum and maximum value.
+ */
+export const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max)
+
+/**
+ * Check if a value is a finite number.
+ */
+export const isNumber = (value: unknown): value is number =>
+  typeof value === "number" && Number.isFinite(value)

package/src/styles/theme.css

@@ -57,6 +57,7 @@
   --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
 
   --leu-z-index-popup: 100;
+  --leu-z-index-scroll-top: 1099;
 
   @leu-font-styles './font-definitions.json';
   --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";