@uva-glass/component-library 3.50.1 → 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(""), _ = v(null), g = v(null), b = v(null), N = (
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
}, R = (
|
|
25
|
-
const
|
|
26
|
-
f(
|
|
27
|
-
}, h = (
|
|
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
28
|
if (!_.current) return;
|
|
29
|
-
const
|
|
29
|
+
const e = (r - t) / (o - t) * I;
|
|
30
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) ${
|
|
33
|
+
var(--color-grey-700) ${e}%,
|
|
34
|
+
var(--color-grey-400) ${e}%,
|
|
35
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 = (
|
|
41
|
+
}, y = (r) => {
|
|
42
42
|
if (g.current && b.current) {
|
|
43
|
-
const
|
|
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);
|
|
@@ -55,7 +55,7 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
|
|
|
55
55
|
type: "button",
|
|
56
56
|
className: l.slider_button,
|
|
57
57
|
onClick: () => N(-1),
|
|
58
|
-
"aria-label":
|
|
58
|
+
"aria-label": u?.decrease ? u.decrease : "Verlaag waarde",
|
|
59
59
|
disabled: s,
|
|
60
60
|
children: /* @__PURE__ */ a(E, { name: "Minus", size: 20 })
|
|
61
61
|
}
|
|
@@ -100,7 +100,7 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
|
|
|
100
100
|
type: "button",
|
|
101
101
|
className: l.slider_button,
|
|
102
102
|
onClick: () => N(1),
|
|
103
|
-
"aria-label":
|
|
103
|
+
"aria-label": u?.increase ? u.increase : "Verhoog waarde",
|
|
104
104
|
disabled: s,
|
|
105
105
|
children: /* @__PURE__ */ a(E, { name: "Plus", size: 20 })
|
|
106
106
|
}
|