@uva-glass/component-library 3.50.0 → 3.50.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/dist/assets/Slider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._slider_wrapper_euug7_1{align-items:center;display:flex;gap:1rem;width:100%}._slider_button_euug7_8{align-items:center;appearance:none;aspect-ratio:1 / 1;background:none;border:1px solid transparent;border-radius:.25rem;color:var(--color-grey-700);cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem}._slider_button_euug7_8:focus-visible{outline:.125rem dotted var(--color-navy-600);outline-offset:.125rem}._slider_button_euug7_8:hover{border-color:var(--color-grey-700)}._slider_button_euug7_8:disabled,._slider_button_euug7_8:disabled:hover{border:none;cursor:not-allowed}._slider_trackwrapper_euug7_38{display:flex;position:relative;width:100%}._slider_balloon_euug7_44{color:var(--color-grey-700);position:absolute;text-align:center;top:-1.8125rem;white-space:nowrap}._slider_input_euug7_52{appearance:none;background:var(--color-grey-400);flex-grow:1;height:.25rem}._slider_input_euug7_52:focus-visible{outline:.125rem dotted var(--color-navy-600);outline-offset:.125rem}._slider_input_euug7_52:disabled{cursor:not-allowed}._slider_input_euug7_52::-webkit-slider-runnable-track{appearance:none;color:var(--color-navy-600);cursor:pointer;height:2rem;margin-top:-.125rem}._slider_input_euug7_52:disabled::-webkit-slider-runnable-track{cursor:not-allowed}._slider_input_euug7_52::-webkit-slider-thumb{appearance:none;background:var(--color-uva-white);border:2px solid var(--color-navy-600);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(.5rem + 1px);position:relative;width:var(--thumb-size)}._slider_input_euug7_52:disabled::-webkit-slider-thumb,._slider_input_euug7_52:disabled:hover::-webkit-slider-thumb{background:var(--color-grey-700);border:2px solid var(--color-grey-700);cursor:not-allowed}._slider_input_euug7_52::-moz-range-thumb{appearance:none;background:var(--color-uva-white);border:2px solid var(--color-navy-600);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_euug7_52:disabled::-moz-range-thumb,._slider_input_euug7_52:hover:disabled::-moz-range-thumb{background:var(--color-grey-700);border:2px solid var(--color-grey-700);cursor:not-allowed}._slider_input_euug7_52::-ms-thumb{appearance:none;background:var(--color-uva-white);border:2px solid var(--color-navy-600);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_euug7_52:disabled::-ms-thumb,._slider_input_euug7_52:hover:disabled::-ms-thumb{background:var(--color-grey-700);border:2px solid var(--color-grey-700);cursor:not-allowed}._slider_input_euug7_52::-webkit-slider-thumb:hover{background:var(--color-navy-200);border:2px solid var(--color-navy-800)}._slider_input_euug7_52::-moz-range-thumb:hover{background:var(--color-navy-200);border:2px solid var(--color-navy-800)}._slider_input_euug7_52::-ms-thumb:hover{background:var(--color-navy-200);border:2px solid var(--color-navy-800)}._slider_input_euug7_52::-moz-range-progress{background-color:var(--color-navy-600)}._slider_input_euug7_52::-moz-range-track{background-color:var(--color-grey-400)}._slider_input_euug7_52::-ms-fill-lower{background-color:var(--color-navy-600)}._slider_input_euug7_52::-ms-fill-upper{background-color:var(--color-grey-400)}
|
|
@@ -2,7 +2,7 @@ import { jsxs as m, jsx as a } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState as S, useRef as v, useEffectEvent as x, useEffect as B } from "react";
|
|
3
3
|
import { c as H } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import { Icon as E } from "../Icon/Icon.js";
|
|
5
|
-
import '../../assets/Slider.css';const T = "
|
|
5
|
+
import '../../assets/Slider.css';const T = "_slider_wrapper_euug7_1", j = "_slider_button_euug7_8", C = "_slider_trackwrapper_euug7_38", D = "_slider_balloon_euug7_44", F = "_slider_input_euug7_52", l = {
|
|
6
6
|
slider_wrapper: T,
|
|
7
7
|
slider_button: j,
|
|
8
8
|
slider_trackwrapper: C,
|
|
@@ -14,37 +14,37 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
|
|
|
14
14
|
value: i,
|
|
15
15
|
step: k = 1,
|
|
16
16
|
units: c,
|
|
17
|
-
navigationLabels:
|
|
17
|
+
navigationLabels: u,
|
|
18
18
|
disabled: s = !1,
|
|
19
|
-
onChange:
|
|
19
|
+
onChange: d
|
|
20
20
|
}) => {
|
|
21
|
-
const [n, f] = S(i !== void 0 ? i : (t + o) * w), [V, P] = S(""),
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
}, R = (
|
|
25
|
-
const
|
|
26
|
-
f(
|
|
27
|
-
},
|
|
28
|
-
if (!
|
|
29
|
-
const
|
|
30
|
-
s ?
|
|
21
|
+
const [n, f] = S(i !== void 0 ? i : (t + o) * w), [V, P] = S(""), _ = v(null), g = v(null), b = v(null), N = (r) => {
|
|
22
|
+
const e = n + r * k;
|
|
23
|
+
e >= t && e <= o && (f(e), h(e), y(e), d && d(e));
|
|
24
|
+
}, R = (r) => {
|
|
25
|
+
const e = Number(r.target.value);
|
|
26
|
+
f(e), h(e), y(e), d && d(e);
|
|
27
|
+
}, h = (r) => {
|
|
28
|
+
if (!_.current) return;
|
|
29
|
+
const e = (r - t) / (o - t) * I;
|
|
30
|
+
s ? _.current.style.background = `linear-gradient(
|
|
31
31
|
to right,
|
|
32
32
|
var(--color-grey-700) 0%,
|
|
33
|
-
var(--color-grey-700) ${
|
|
34
|
-
var(--color-grey-400) ${
|
|
35
|
-
var(--color-grey-400) 100%)` :
|
|
33
|
+
var(--color-grey-700) ${e}%,
|
|
34
|
+
var(--color-grey-400) ${e}%,
|
|
35
|
+
var(--color-grey-400) 100%)` : _.current.style.background = `linear-gradient(
|
|
36
36
|
to right,
|
|
37
37
|
var(--color-navy-600) 0%,
|
|
38
|
-
var(--color-navy-600) ${
|
|
39
|
-
var(--color-grey-400) ${
|
|
38
|
+
var(--color-navy-600) ${e}%,
|
|
39
|
+
var(--color-grey-400) ${e}%,
|
|
40
40
|
var(--color-grey-400) 100%)`;
|
|
41
|
-
}, y = (
|
|
42
|
-
if (g.current &&
|
|
43
|
-
const
|
|
41
|
+
}, y = (r) => {
|
|
42
|
+
if (g.current && b.current) {
|
|
43
|
+
const e = b.current.clientWidth, $ = g.current.clientWidth - p, W = (r - t) / (o - t) * $ - (e - p) * w, z = Math.max(0, Math.min(W, $ - e + p * w));
|
|
44
44
|
P(`${z}px`);
|
|
45
45
|
}
|
|
46
|
-
}, M = x((
|
|
47
|
-
f(
|
|
46
|
+
}, M = x((r) => {
|
|
47
|
+
f(r), h(r), y(r);
|
|
48
48
|
});
|
|
49
49
|
return B(() => {
|
|
50
50
|
i !== void 0 && M(i);
|
|
@@ -52,9 +52,10 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
|
|
|
52
52
|
/* @__PURE__ */ a(
|
|
53
53
|
"button",
|
|
54
54
|
{
|
|
55
|
+
type: "button",
|
|
55
56
|
className: l.slider_button,
|
|
56
57
|
onClick: () => N(-1),
|
|
57
|
-
"aria-label":
|
|
58
|
+
"aria-label": u?.decrease ? u.decrease : "Verlaag waarde",
|
|
58
59
|
disabled: s,
|
|
59
60
|
children: /* @__PURE__ */ a(E, { name: "Minus", size: 20 })
|
|
60
61
|
}
|
|
@@ -65,7 +66,7 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
|
|
|
65
66
|
{
|
|
66
67
|
className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: s }),
|
|
67
68
|
style: { left: V },
|
|
68
|
-
ref:
|
|
69
|
+
ref: b,
|
|
69
70
|
children: [
|
|
70
71
|
n,
|
|
71
72
|
c && /* @__PURE__ */ a("span", { className: l.slider_units, children: c })
|
|
@@ -82,7 +83,7 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
|
|
|
82
83
|
step: k,
|
|
83
84
|
value: n,
|
|
84
85
|
onChange: R,
|
|
85
|
-
ref:
|
|
86
|
+
ref: _,
|
|
86
87
|
style: { "--thumb-size": `${p / U}rem` },
|
|
87
88
|
"aria-valuemin": t,
|
|
88
89
|
"aria-valuemax": o,
|
|
@@ -96,9 +97,10 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
|
|
|
96
97
|
/* @__PURE__ */ a(
|
|
97
98
|
"button",
|
|
98
99
|
{
|
|
100
|
+
type: "button",
|
|
99
101
|
className: l.slider_button,
|
|
100
102
|
onClick: () => N(1),
|
|
101
|
-
"aria-label":
|
|
103
|
+
"aria-label": u?.increase ? u.increase : "Verhoog waarde",
|
|
102
104
|
disabled: s,
|
|
103
105
|
children: /* @__PURE__ */ a(E, { name: "Plus", size: 20 })
|
|
104
106
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n /* The minimum value of the slider */\r\n min: number;\r\n /* The maximum value of the slider */\r\n max: number;\r\n /* The current value of the slider */\r\n value?: number;\r\n /* The step value of the slider */\r\n step?: number;\r\n /* The units to display next to the value */\r\n units?: string;\r\n /* aria-label labels for navigation buttons */\r\n navigationLabels?: { increase: string; decrease: string };\r\n /* Whether the slider is disabled */\r\n disabled?: boolean;\r\n /* Callback function when the value changes */\r\n onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n min,\r\n max,\r\n value,\r\n step = 1,\r\n units,\r\n navigationLabels,\r\n disabled = false,\r\n onChange,\r\n}: SliderProps) => {\r\n const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n const sliderRef = useRef<HTMLInputElement>(null);\r\n const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n const handleButtonClick = (direction: number) => {\r\n const newValue = sliderValue + direction * step;\r\n if (newValue >= min && newValue <= max) {\r\n setSliderValue(newValue);\r\n paintValueOnTrack(newValue);\r\n setFloaterPosition(newValue);\r\n if (onChange) {\r\n onChange(newValue);\r\n }\r\n }\r\n };\r\n\r\n const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const newValue = Number(event.target.value);\r\n setSliderValue(newValue);\r\n paintValueOnTrack(newValue);\r\n setFloaterPosition(newValue);\r\n if (onChange) {\r\n onChange(newValue);\r\n }\r\n };\r\n\r\n const paintValueOnTrack = (valueToPaint: number) => {\r\n if (!sliderRef.current) return;\r\n const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n if (disabled) {\r\n sliderRef.current.style.background = `linear-gradient(\r\n to right, \r\n var(--color-grey-700) 0%, \r\n var(--color-grey-700) ${percentage}%, \r\n var(--color-grey-400) ${percentage}%, \r\n var(--color-grey-400) 100%)`;\r\n } else {\r\n sliderRef.current.style.background = `linear-gradient(\r\n to right, \r\n var(--color-navy-600) 0%, \r\n var(--color-navy-600) ${percentage}%, \r\n var(--color-grey-400) ${percentage}%, \r\n var(--color-grey-400) 100%)`;\r\n }\r\n };\r\n\r\n const setFloaterPosition = (value: number) => {\r\n if (trackWrapperRef.current && balloonRef.current) {\r\n const balloonWidth = balloonRef.current.clientWidth;\r\n const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n const position = ((value - min) / (max - min)) * trackWidth;\r\n const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n setBalloonLeftPosition(`${clampedLeft}px`);\r\n }\r\n };\r\n\r\n const initializeSlider = useEffectEvent((value: number) => {\r\n setSliderValue(value);\r\n paintValueOnTrack(value);\r\n setFloaterPosition(value);\r\n });\r\n\r\n useEffect(() => {\r\n if (value !== undefined) {\r\n initializeSlider(value);\r\n }\r\n }, [value, disabled]);\r\n\r\n return (\r\n <div className={styles['slider_wrapper']}>\r\n <button\r\n className={styles['slider_button']}\r\n onClick={() => handleButtonClick(-1)}\r\n aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n disabled={disabled}\r\n >\r\n <Icon name=\"Minus\" size={20} />\r\n </button>\r\n <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n <div\r\n className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n style={{ left: balloonLeftPosition }}\r\n ref={balloonRef}\r\n >\r\n {sliderValue}\r\n {units && <span className={styles['slider_units']}>{units}</span>}\r\n </div>\r\n <input\r\n type=\"range\"\r\n className={styles['slider_input']}\r\n min={min}\r\n max={max}\r\n step={step}\r\n value={sliderValue}\r\n onChange={handleSliderChange}\r\n ref={sliderRef}\r\n style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n aria-valuemin={min}\r\n aria-valuemax={max}\r\n aria-valuenow={sliderValue}\r\n aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n aria-label=\"Slider\"\r\n disabled={disabled}\r\n />\r\n </div>\r\n <button\r\n className={styles['slider_button']}\r\n onClick={() => handleButtonClick(1)}\r\n aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n disabled={disabled}\r\n >\r\n <Icon name=\"Plus\" size={20} />\r\n </button>\r\n </div>\r\n );\r\n};\r\n"],"names":["HALF_STEP","HUNDRED","THUMB_SIZE","REM","Slider","min","max","value","step","units","navigationLabels","disabled","onChange","sliderValue","setSliderValue","useState","balloonLeftPosition","setBalloonLeftPosition","sliderRef","useRef","trackWrapperRef","balloonRef","handleButtonClick","direction","newValue","paintValueOnTrack","setFloaterPosition","handleSliderChange","event","valueToPaint","percentage","balloonWidth","trackWidth","leftPosition","clampedLeft","initializeSlider","useEffectEvent","useEffect","jsxs","styles","jsx","Icon","clsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n /* The minimum value of the slider */\r\n min: number;\r\n /* The maximum value of the slider */\r\n max: number;\r\n /* The current value of the slider */\r\n value?: number;\r\n /* The step value of the slider */\r\n step?: number;\r\n /* The units to display next to the value */\r\n units?: string;\r\n /* aria-label labels for navigation buttons */\r\n navigationLabels?: { increase: string; decrease: string };\r\n /* Whether the slider is disabled */\r\n disabled?: boolean;\r\n /* Callback function when the value changes */\r\n onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n min,\r\n max,\r\n value,\r\n step = 1,\r\n units,\r\n navigationLabels,\r\n disabled = false,\r\n onChange,\r\n}: SliderProps) => {\r\n const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n const sliderRef = useRef<HTMLInputElement>(null);\r\n const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n const handleButtonClick = (direction: number) => {\r\n const newValue = sliderValue + direction * step;\r\n if (newValue >= min && newValue <= max) {\r\n setSliderValue(newValue);\r\n paintValueOnTrack(newValue);\r\n setFloaterPosition(newValue);\r\n if (onChange) {\r\n onChange(newValue);\r\n }\r\n }\r\n };\r\n\r\n const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const newValue = Number(event.target.value);\r\n setSliderValue(newValue);\r\n paintValueOnTrack(newValue);\r\n setFloaterPosition(newValue);\r\n if (onChange) {\r\n onChange(newValue);\r\n }\r\n };\r\n\r\n const paintValueOnTrack = (valueToPaint: number) => {\r\n if (!sliderRef.current) return;\r\n const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n if (disabled) {\r\n sliderRef.current.style.background = `linear-gradient(\r\n to right, \r\n var(--color-grey-700) 0%, \r\n var(--color-grey-700) ${percentage}%, \r\n var(--color-grey-400) ${percentage}%, \r\n var(--color-grey-400) 100%)`;\r\n } else {\r\n sliderRef.current.style.background = `linear-gradient(\r\n to right, \r\n var(--color-navy-600) 0%, \r\n var(--color-navy-600) ${percentage}%, \r\n var(--color-grey-400) ${percentage}%, \r\n var(--color-grey-400) 100%)`;\r\n }\r\n };\r\n\r\n const setFloaterPosition = (value: number) => {\r\n if (trackWrapperRef.current && balloonRef.current) {\r\n const balloonWidth = balloonRef.current.clientWidth;\r\n const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n const position = ((value - min) / (max - min)) * trackWidth;\r\n const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n setBalloonLeftPosition(`${clampedLeft}px`);\r\n }\r\n };\r\n\r\n const initializeSlider = useEffectEvent((value: number) => {\r\n setSliderValue(value);\r\n paintValueOnTrack(value);\r\n setFloaterPosition(value);\r\n });\r\n\r\n useEffect(() => {\r\n if (value !== undefined) {\r\n initializeSlider(value);\r\n }\r\n }, [value, disabled]);\r\n\r\n return (\r\n <div className={styles['slider_wrapper']}>\r\n <button\r\n type=\"button\"\r\n className={styles['slider_button']}\r\n onClick={() => handleButtonClick(-1)}\r\n aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n disabled={disabled}\r\n >\r\n <Icon name=\"Minus\" size={20} />\r\n </button>\r\n <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n <div\r\n className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n style={{ left: balloonLeftPosition }}\r\n ref={balloonRef}\r\n >\r\n {sliderValue}\r\n {units && <span className={styles['slider_units']}>{units}</span>}\r\n </div>\r\n <input\r\n type=\"range\"\r\n className={styles['slider_input']}\r\n min={min}\r\n max={max}\r\n step={step}\r\n value={sliderValue}\r\n onChange={handleSliderChange}\r\n ref={sliderRef}\r\n style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n aria-valuemin={min}\r\n aria-valuemax={max}\r\n aria-valuenow={sliderValue}\r\n aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n aria-label=\"Slider\"\r\n disabled={disabled}\r\n />\r\n </div>\r\n <button\r\n type=\"button\"\r\n className={styles['slider_button']}\r\n onClick={() => handleButtonClick(1)}\r\n aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n disabled={disabled}\r\n >\r\n <Icon name=\"Plus\" size={20} />\r\n </button>\r\n </div>\r\n );\r\n};\r\n"],"names":["HALF_STEP","HUNDRED","THUMB_SIZE","REM","Slider","min","max","value","step","units","navigationLabels","disabled","onChange","sliderValue","setSliderValue","useState","balloonLeftPosition","setBalloonLeftPosition","sliderRef","useRef","trackWrapperRef","balloonRef","handleButtonClick","direction","newValue","paintValueOnTrack","setFloaterPosition","handleSliderChange","event","valueToPaint","percentage","balloonWidth","trackWidth","leftPosition","clampedLeft","initializeSlider","useEffectEvent","useEffect","jsxs","styles","jsx","Icon","clsx"],"mappings":"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"}
|