@uva-glass/component-library 3.50.0 → 3.50.1

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 (3) hide show
  1. package/dist/components/Slider/Slider.js +15 -13
  2. package/dist/components/Slider/Slider.js.map +1 -1
  3. package/package.json +1 -1
package/dist/components/Slider/Slider.js CHANGED
@@ -16,35 +16,35 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_136tg_1", j = "_slid
16
16
  units: c,
17
17
  navigationLabels: d,
18
18
  disabled: s = !1,
19
- onChange: _
19
+ onChange: u
20
20
  }) => {
21
- const [n, f] = S(i !== void 0 ? i : (t + o) * w), [V, P] = S(""), u = v(null), g = v(null), h = v(null), N = (e) => {
21
+ const [n, f] = S(i !== void 0 ? i : (t + o) * w), [V, P] = S(""), _ = v(null), g = v(null), b = v(null), N = (e) => {
22
22
  const r = n + e * k;
23
- r >= t && r <= o && (f(r), b(r), y(r), _ && _(r));
23
+ r >= t && r <= o && (f(r), h(r), y(r), u && u(r));
24
24
  }, R = (e) => {
25
25
  const r = Number(e.target.value);
26
- f(r), b(r), y(r), _ && _(r);
27
- }, b = (e) => {
28
- if (!u.current) return;
26
+ f(r), h(r), y(r), u && u(r);
27
+ }, h = (e) => {
28
+ if (!_.current) return;
29
29
  const r = (e - t) / (o - t) * I;
30
- s ? u.current.style.background = `linear-gradient(
30
+ s ? _.current.style.background = `linear-gradient(
31
31
  to right,
32
32
  var(--color-grey-700) 0%,
33
33
  var(--color-grey-700) ${r}%,
34
34
  var(--color-grey-400) ${r}%,
35
- var(--color-grey-400) 100%)` : u.current.style.background = `linear-gradient(
35
+ var(--color-grey-400) 100%)` : _.current.style.background = `linear-gradient(
36
36
  to right,
37
37
  var(--color-navy-600) 0%,
38
38
  var(--color-navy-600) ${r}%,
39
39
  var(--color-grey-400) ${r}%,
40
40
  var(--color-grey-400) 100%)`;
41
41
  }, y = (e) => {
42
- if (g.current && h.current) {
43
- const r = h.current.clientWidth, $ = g.current.clientWidth - p, W = (e - t) / (o - t) * $ - (r - p) * w, z = Math.max(0, Math.min(W, $ - r + p * w));
42
+ if (g.current && b.current) {
43
+ const r = b.current.clientWidth, $ = g.current.clientWidth - p, W = (e - t) / (o - t) * $ - (r - p) * w, z = Math.max(0, Math.min(W, $ - r + p * w));
44
44
  P(`${z}px`);
45
45
  }
46
46
  }, M = x((e) => {
47
- f(e), b(e), y(e);
47
+ f(e), h(e), y(e);
48
48
  });
49
49
  return B(() => {
50
50
  i !== void 0 && M(i);
@@ -52,6 +52,7 @@ 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
58
  "aria-label": d?.decrease ? d.decrease : "Verlaag waarde",
@@ -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: h,
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: u,
86
+ ref: _,
86
87
  style: { "--thumb-size": `${p / U}rem` },
87
88
  "aria-valuemin": t,
88
89
  "aria-valuemax": o,
@@ -96,6 +97,7 @@ 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
103
  "aria-label": d?.increase ? d.increase : "Verhoog waarde",
package/dist/components/Slider/Slider.js.map CHANGED
@@ -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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"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@uva-glass/component-library",
3
3
  "author": "Team Glass - Frontend vrienden",
4
4
  "private": false,
5
- "version": "3.50.0",
5
+ "version": "3.50.1",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",