@helsenorge/designsystem-react 6.1.3 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [6.1.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.2&targetVersion=GTv6.1.3) (2024-02-14)
+
+### Bug Fixes
+
+- promopanel har ikke lenger lg breakpoint
+  ([2c332e5](https://github.com/helsenorge/designsystem/commit/2c332e5a17aca128d09a293a56daf484a2a26d53)), closes
+  [#319556](https://github.com/helsenorge/designsystem/issues/319556)
+
 ## [6.1.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.1&targetVersion=GTv6.1.2) (2024-02-12)
 
 ### Bug Fixes

package/components/Slider/Slider.d.ts

@@ -20,7 +20,9 @@ interface SliderProps {
     maxValue?: number;
     /** Function to be called when the value state has changed. */
     onChange?: (value: number) => void;
-    /** Sets the steps data for the slider*/
+    /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */
+    selected?: boolean;
+    /** Sets the steps data for the slider */
     steps?: SliderStep[];
     /** Sets the step to move per point in the slider */
     step?: number;

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4QxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+RxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/Slider.js

@@ -1,165 +1,174 @@
-import a, { useState as R, useRef as U, useEffect as h } from "react";
-import S from "classnames";
-import { AnalyticsId as F } from "../../constants.js";
-import { useSize as G } from "../../hooks/useSize.js";
-import { useUuid as j } from "../../hooks/useUuid.js";
-import { getAriaLabelAttributes as J } from "../../utils/accessibility.js";
-import Q from "../Title/Title.js";
-import o from "./styles.module.scss";
-const Y = (u, f, l) => {
-  const [v, n] = R(u), E = (t) => {
-    t > l ? n(l) : t < f ? n(f) : n(t);
+import o, { useState as M, useRef as T, useEffect as E } from "react";
+import A from "classnames";
+import { AnalyticsId as Y } from "../../constants.js";
+import { useSize as Z } from "../../hooks/useSize.js";
+import { useUuid as I } from "../../hooks/useUuid.js";
+import { getAriaLabelAttributes as x } from "../../utils/accessibility.js";
+import V from "../Title/Title.js";
+import a from "./styles.module.scss";
+const ee = (u, m, l) => {
+  const [v, n] = M(u), y = (r) => {
+    r > l ? n(l) : r < m ? n(m) : n(r);
   };
-  return h(() => {
-    n((l - f) / 2 + f);
-  }, [f, l]), [v, E];
-}, Z = ({
+  return E(() => {
+    n((l - m) / 2 + m);
+  }, [m, l]), [v, y];
+}, te = ({
   title: u,
-  ariaLabel: f,
+  ariaLabel: m,
   labelLeft: l,
   labelRight: v,
   disabled: n = !1,
-  onChange: E,
-  steps: t,
+  onChange: y,
+  steps: r,
   step: _ = 1,
   minValue: i = 0,
-  maxValue: s = t ? t.length - 1 : 100,
-  testId: $
+  maxValue: s = r ? r.length - 1 : 100,
+  selected: w = !0,
+  testId: z
 }) => {
-  const [A, I] = R(!1), [d, m] = Y((s - i) / 2 + i, i, s), k = j(), y = j(), w = j(), N = U(null), b = U(null), { width: M } = G(N) || { width: 0 }, C = s / 10;
-  h(() => {
-    const r = () => {
-      I(!1);
+  const [C, D] = M(!1), [k, L] = M(w), [d, f] = ee((s - i) / 2 + i, i, s), g = I(), S = I(), N = I(), b = T(null), P = T(null), { width: U } = Z(b) || { width: 0 }, R = s / 10;
+  E(() => {
+    const t = () => {
+      D(!1);
     };
-    return document.addEventListener("pointerup", r), () => {
-      document.removeEventListener("pointerup", r);
+    return document.addEventListener("pointerup", t), () => {
+      document.removeEventListener("pointerup", t);
     };
   }, []);
-  const D = (r) => {
-    var L;
-    const e = ((L = N.current) == null ? void 0 : L.getBoundingClientRect().x) ?? 0, c = (r - e) / M, g = s - i;
-    let p = c * g + i;
-    return p = Math.round(p / _) * _, p = Math.max(i, Math.min(s, p)), p;
+  const $ = (t) => {
+    var X;
+    const e = ((X = b.current) == null ? void 0 : X.getBoundingClientRect().x) ?? 0, c = (t - e) / U, p = s - i;
+    let h = c * p + i;
+    return h = Math.round(h / _) * _, h = Math.max(i, Math.min(s, h)), h;
   };
-  h(() => {
-    const r = (e) => {
-      if (!n && A) {
-        const c = D(e.clientX);
-        m(c);
+  E(() => {
+    const t = (e) => {
+      if (!n && C) {
+        const c = $(e.clientX);
+        f(c);
       }
     };
-    return document.addEventListener("pointermove", r), () => {
-      document.removeEventListener("pointermove", r);
+    return document.addEventListener("pointermove", t), () => {
+      document.removeEventListener("pointermove", t);
     };
-  }, [A]), h(() => {
-    !n && E && E(d);
-  }, [d]);
-  const B = (r) => {
+  }, [C]), E(() => {
+    !n && k && y && y(d);
+  }, [d, k]), E(() => {
+    w !== k && L(w);
+  }, [w]);
+  const B = () => {
+    k === !1 && L(!0);
+  }, K = (t) => {
     if (n)
       return;
     let e = !1;
-    switch (r.key) {
+    switch (t.key) {
       case "ArrowLeft":
       case "ArrowDown":
-        m(d - _), e = !0;
+        f(d - _), e = !0;
         break;
       case "PageDown":
-        m(d - C), e = !0;
+        f(d - R), e = !0;
         break;
       case "ArrowRight":
       case "ArrowUp":
-        m(d + _), e = !0;
+        f(d + _), e = !0;
         break;
       case "PageUp":
-        m(d + C), e = !0;
+        f(d + R), e = !0;
         break;
       case "Home":
-        m(i), e = !0;
+        f(i), e = !0;
         break;
       case "End":
-        m(s), e = !0;
+        f(s), e = !0;
         break;
     }
-    e && (r.preventDefault(), r.stopPropagation());
-  }, X = (r) => {
+    e && (B(), t.preventDefault(), t.stopPropagation());
+  }, H = (t) => {
     var c;
     if (n)
       return;
-    const e = D(r.clientX);
-    m(e), (c = b.current) == null || c.focus();
-  }, T = (r) => {
+    B();
+    const e = $(t.clientX);
+    f(e), (c = P.current) == null || c.focus();
+  }, O = (t) => {
     var e;
-    n || (I(!0), r.preventDefault(), r.stopPropagation(), (e = b.current) == null || e.focus());
-  }, z = s !== i ? M / (s - i) * (d - i) : 0, K = () => {
-    const r = t ? Math.round((d - i) / _) : null;
-    if (t && r !== null && r >= 0 && r < t.length) {
-      const e = t[r], c = e.emojiUniCode, g = typeof e.label < "u" ? e.label.toString() : void 0;
-      return c && g ? `${c} ${g}` : c || g;
+    n || (D(!0), t.preventDefault(), t.stopPropagation(), (e = P.current) == null || e.focus());
+  }, W = s !== i ? U / (s - i) * (d - i) : 0, q = () => {
+    const t = r ? Math.round((d - i) / _) : null;
+    if (r && t !== null && t >= 0 && t < r.length) {
+      const e = r[t], c = e.emojiUniCode, p = typeof e.label < "u" ? e.label.toString() : void 0;
+      return c && p ? `${c} ${p}` : c || p;
     }
-  }, H = J({
-    label: f,
+  }, F = x({
+    label: m,
     id: (() => {
       if (u && l && v)
-        return [k, y, w].join(" ");
+        return [g, S, N].join(" ");
       if (u && l)
-        return [k, y].join(" ");
+        return [g, S].join(" ");
       if (u && v)
-        return [k, w].join(" ");
+        return [g, N].join(" ");
       if (u)
-        return k;
+        return g;
     })(),
     prefer: "label"
-  }), P = (r, e) => ({ left: `${r / (e - 1) * 100}%` }), O = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__emoji-container"] }, t == null ? void 0 : t.map((r, e) => r.emojiUniCode && /* @__PURE__ */ a.createElement(
+  }), j = (t, e) => ({ left: `${t / (e - 1) * 100}%` }), G = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__emoji-container"] }, r == null ? void 0 : r.map((t, e) => t.emojiUniCode && /* @__PURE__ */ o.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "emoji" + e,
-      className: o.slider__emoji,
-      style: P(e, t.length)
+      className: a.slider__emoji,
+      style: j(e, r.length)
     },
-    r.emojiUniCode
-  ))), W = () => t == null ? void 0 : t.map((r, e) => /* @__PURE__ */ a.createElement("div", { key: "step" + e, className: o.slider__track__step, style: P(e, t.length) })), q = () => /* @__PURE__ */ a.createElement("div", { className: o["slider__value-container"] }, t == null ? void 0 : t.map((r, e) => typeof r.label < "u" && /* @__PURE__ */ a.createElement(
+    t.emojiUniCode
+  ))), J = () => r == null ? void 0 : r.map((t, e) => /* @__PURE__ */ o.createElement("div", { key: "step" + e, className: a.slider__track__step, style: j(e, r.length) })), Q = () => /* @__PURE__ */ o.createElement("div", { className: a["slider__value-container"] }, r == null ? void 0 : r.map((t, e) => typeof t.label < "u" && /* @__PURE__ */ o.createElement(
     "div",
     {
       "aria-hidden": !0,
       key: "label" + e,
-      className: o.slider__value,
-      style: P(e, t.length)
+      className: a.slider__value,
+      style: j(e, r.length)
     },
-    r.label
+    t.label
   )));
-  return /* @__PURE__ */ a.createElement("div", { className: o.slider, "data-testid": $, "data-analyticsid": F.Slider }, u && /* @__PURE__ */ a.createElement(Q, { className: o.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: k }, u), /* @__PURE__ */ a.createElement("div", { className: o["slider__content-container"] }, O(), /* @__PURE__ */ a.createElement(
+  return /* @__PURE__ */ o.createElement("div", { className: a.slider, "data-testid": z, "data-analyticsid": Y.Slider }, u && /* @__PURE__ */ o.createElement(V, { className: a.slider__title, htmlMarkup: "h3", margin: 0, appearance: "title3", id: g }, u), /* @__PURE__ */ o.createElement("div", { className: a["slider__content-container"] }, G(), /* @__PURE__ */ o.createElement(
     "div",
     {
-      ref: N,
-      className: S(o["slider__track-wrapper"], n && o["slider__track-wrapper--disabled"]),
-      onClick: X,
-      onPointerDown: T
+      ref: b,
+      className: A(a["slider__track-wrapper"], n && a["slider__track-wrapper--disabled"]),
+      onClick: H,
+      onPointerDown: O
     },
-    /* @__PURE__ */ a.createElement("div", { className: S(o.slider__track, n && o["slider__track--disabled"]) }, W()),
-    /* @__PURE__ */ a.createElement(
+    /* @__PURE__ */ o.createElement("div", { className: A(a.slider__track, n && a["slider__track--disabled"]) }, J()),
+    /* @__PURE__ */ o.createElement(
       "div",
       {
         role: n ? void 0 : "slider",
-        ref: b,
-        className: S(o.slider__marker, n && o["slider__marker--disabled"]),
+        ref: P,
+        className: A(a.slider__marker, {
+          [a["slider__marker--disabled"]]: n,
+          [a["slider__marker--selected"]]: k
+        }),
         style: {
-          left: `${z}px`
+          left: `${W}px`
         },
-        onKeyDown: B,
+        onKeyDown: K,
         "aria-valuenow": d,
-        "aria-valuetext": K(),
+        "aria-valuetext": q(),
         "aria-valuemin": i,
         "aria-valuemax": s,
         tabIndex: n ? void 0 : 0,
         "aria-disabled": n,
-        ...H
+        ...F
       }
     )
-  ), q()), (l || v) && /* @__PURE__ */ a.createElement("span", { className: o.slider__options }, /* @__PURE__ */ a.createElement("span", { id: y }, l), /* @__PURE__ */ a.createElement("span", { id: w }, v)));
-}, le = Z;
+  ), Q()), (l || v) && /* @__PURE__ */ o.createElement("span", { className: a.slider__options }, /* @__PURE__ */ o.createElement("span", { id: S }, l), /* @__PURE__ */ o.createElement("span", { id: N }, v)));
+}, fe = te;
 export {
-  Z as Slider,
-  le as default
+  te as Slider,
+  fe as default
 };
 //# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the steps data for the slider*/\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":";;;;;;;;AAYA,MAAMA,IAAqB,CAACC,GAAiBC,GAAaC,MAAmD;AAC3G,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAO,GAEpCM,IAAe,CAACC,MAA2B;AAC/C,IAAIA,IAAWL,IACbE,EAASF,CAAG,IACHK,IAAWN,IACpBG,EAASH,CAAG,IAEZG,EAASG,CAAQ;AAAA,EACnB;AAGF,SAAAC,EAAU,MAAM;AACJ,IAAAJ,GAAAF,IAAMD,KAAO,IAAIA,CAAG;AAAA,EAAA,GAC7B,CAACA,GAAKC,CAAG,CAAC,GAEN,CAACC,GAAOG,CAAY;AAC7B,GAgCaG,IAAgC,CAAC;AAAA,EAC5C,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAWH,IAAQA,EAAM,SAAS,IAAI;AAAA,EACtC,QAAAI;AACF,MAAM;AACJ,QAAM,CAACC,GAAUC,CAAW,IAAIjB,EAAS,EAAK,GACxC,CAACF,GAAOC,CAAQ,IAAIL,GAAoBoB,IAAWD,KAAY,IAAIA,GAAUA,GAAUC,CAAQ,GAE/FI,IAAUC,KACVC,IAAcD,KACdE,IAAeF,KACfG,IAAWC,EAAuB,IAAI,GACtCC,IAAYD,EAAuB,IAAI,GACvC,EAAE,OAAOE,MAAeC,EAAQJ,CAAQ,KAAK,EAAE,OAAO,KACtDK,IAAYb,IAAW;AAE7B,EAAAX,EAAU,MAAM;AACd,UAAMyB,IAAkB,MAAY;AAClC,MAAAX,EAAY,EAAK;AAAA,IAAA;AAGV,oBAAA,iBAAiB,aAAaW,CAAe,GAE/C,MAAM;AACF,eAAA,oBAAoB,aAAaA,CAAe;AAAA,IAAA;AAAA,EAE7D,GAAG,CAAE,CAAA;AAEC,QAAAC,IAAgC,CAACC,MAAmC;;AACxE,UAAMC,MAAgBC,IAAAV,EAAS,YAAT,gBAAAU,EAAkB,wBAAwB,MAAK,GAG/DC,KAAsBH,IAAiBC,KAAiBN,GACxDS,IAAapB,IAAWD;AAE1Bf,QAAAA,IAAQmC,IAAqBC,IAAarB;AAG9Cf,WAAAA,IADkB,KAAK,MAAMA,IAAQc,CAAI,IACrBA,GACpBd,IAAQ,KAAK,IAAIe,GAAU,KAAK,IAAIC,GAAUhB,CAAK,CAAC,GAE7CA;AAAAA,EAAA;AAGT,EAAAK,EAAU,MAAM;AACR,UAAAgC,IAAoB,CAAC,MAA0B;AAC/C,UAAA,CAAC1B,KAAYO,GAAU;AACnB,cAAAd,IAAW2B,EAA8B,EAAE,OAAO;AACxD,QAAA9B,EAASG,CAAQ;AAAA,MACnB;AAAA,IAAA;AAGO,oBAAA,iBAAiB,eAAeiC,CAAiB,GAEnD,MAAM;AACF,eAAA,oBAAoB,eAAeA,CAAiB;AAAA,IAAA;AAAA,EAC/D,GACC,CAACnB,CAAQ,CAAC,GAEbb,EAAU,MAAM;AACV,IAAA,CAACM,KAAYC,KACfA,EAASZ,CAAK;AAAA,EAChB,GACC,CAACA,CAAK,CAAC;AAEV,QAAMsC,IAA4D,CAAKC,MAAA;AACjE,QAAA5B;AAAU;AAEd,QAAI6B,IAAO;AAEX,YAAQD,EAAE,KAAK;AAAA,MACb,KAAK;AAAA,MACL,KAAK;AACH,QAAAtC,EAASD,IAAQc,CAAI,GACd0B,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAvC,EAASD,IAAQ6B,CAAS,GACnBW,IAAA;AACP;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAvC,EAASD,IAAQc,CAAI,GACd0B,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAvC,EAASD,IAAQ6B,CAAS,GACnBW,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAvC,EAASc,CAAQ,GACVyB,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAvC,EAASe,CAAQ,GACVwB,IAAA;AACP;AAAA,IAGJ;AAEA,IAAIA,MACFD,EAAE,eAAe,GACjBA,EAAE,gBAAgB;AAAA,EACpB,GAGIE,IAA4D,CAAKF,MAAA;;AACjE,QAAA5B;AAAU;AAER,UAAAP,IAAW2B,EAA8BQ,EAAE,OAAO;AACxD,IAAAtC,EAASG,CAAQ,IACjB8B,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBQ,IAA+D,CAAKH,MAAA;;AACpE,IAAA5B,MAEJQ,EAAY,EAAI,GAEhBoB,EAAE,eAAe,GACjBA,EAAE,gBAAgB,IAElBL,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBS,IAAa3B,MAAaD,IAAYY,KAAcX,IAAWD,MAAcf,IAAQe,KAAY,GAEjG6B,IAAmB,MAA0B;AACjD,UAAMC,IAAYhC,IAAQ,KAAK,OAAOb,IAAQe,KAAYD,CAAI,IAAI;AAElE,QAAID,KAASgC,MAAc,QAAQA,KAAa,KAAKA,IAAYhC,EAAM,QAAQ;AACvEC,YAAAA,IAAOD,EAAMgC,CAAS,GACtBC,IAAYhC,EAAK,cACjBiC,IAAQ,OAAOjC,EAAK,QAAU,MAAcA,EAAK,MAAM,aAAa;AAE1E,aAAOgC,KAAaC,IAAQ,GAAGD,CAAS,IAAIC,CAAK,KAAKD,KAAaC;AAAA,IACrE;AAAA,EAEO,GAkBHC,IAAsBC,EAAuB;AAAA,IACjD,OAAOzC;AAAA,IACP,KAjByB,MAA0B;AAC/C,UAAAD,KAASE,KAAaC;AACxB,eAAO,CAACU,GAASE,GAAaC,CAAY,EAAE,KAAK,GAAG;AAEtD,UAAIhB,KAASE;AACX,eAAO,CAACW,GAASE,CAAW,EAAE,KAAK,GAAG;AAExC,UAAIf,KAASG;AACX,eAAO,CAACU,GAASG,CAAY,EAAE,KAAK,GAAG;AAEzC,UAAIhB;AACK,eAAAa;AAAA,IACT,GAKuB;AAAA,IACvB,QAAQ;AAAA,EAAA,CACT,GAEK8B,IAAqB,CAACC,GAAeC,OAClC,EAAE,MAAM,GAAID,KAASC,IAAc,KAAM,GAAG,QAG/CC,IAAgB,MAElBC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,KAC7C1C,KAAA,gBAAAA,EAAO,IAAI,CAACC,GAAMqC,MAEfrC,EAAK,gBACHwC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK,UAAUH;AAAA,MACf,WAAWI,EAAO;AAAA,MAClB,OAAOL,EAAmBC,GAAOtC,EAAM,MAAM;AAAA,IAAA;AAAA,IAE5CC,EAAK;AAAA,EAAA,EAKhB,GAIE0C,IAAc,MACX3C,KAAA,gBAAAA,EAAO,IAAI,CAAC4C,GAAON,MAChBG,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAK,SAASH,GAAO,WAAWI,EAAO,qBAAwB,OAAOL,EAAmBC,GAAOtC,EAAM,MAAM,EAAG,CAAA,IAIzH6C,IAAmB,MAErBJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,KAC7C1C,KAAA,gBAAAA,EAAO,IAAI,CAACC,GAAMqC,MAEf,OAAOrC,EAAK,QAAU,OACpBwC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK,UAAUH;AAAA,MACf,WAAWI,EAAO;AAAA,MAClB,OAAOL,EAAmBC,GAAOtC,EAAM,MAAM;AAAA,IAAA;AAAA,IAE5CC,EAAK;AAAA,EAAA,EAKhB;AAIJ,SACGwC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWC,EAAO,QAAQ,eAAatC,GAAQ,oBAAkB0C,EAAY,UAC/EpD,KACC+C,gBAAAA,EAAA,cAACM,GAAM,EAAA,WAAWL,EAAO,eAAkB,YAAY,MAAM,QAAQ,GAAG,YAAY,UAAU,IAAInC,EAC/F,GAAAb,CACH,GAEF+C,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAO,2BAA2B,KAC/CF,KAGDC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK9B;AAAA,MACL,WAAWqC,EAAWN,EAAO,uBAAuB,GAAG5C,KAAY4C,EAAO,iCAAiC,CAAC;AAAA,MAC5G,SAASd;AAAA,MACT,eAAeC;AAAA,IAAA;AAAA,IAEdY,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWO,EAAWN,EAAO,eAAe5C,KAAY4C,EAAO,yBAAyB,CAAC,EAAI,GAAAC,EAAA,CAAc;AAAA,IAChHF,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM3C,IAAW,SAAY;AAAA,QAC7B,KAAKe;AAAA,QACL,WAAWmC,EAAWN,EAAO,gBAAgB5C,KAAY4C,EAAO,0BAA0B,CAAC;AAAA,QAC3F,OAAO;AAAA,UACL,MAAM,GAAGZ,CAAU;AAAA,QACrB;AAAA,QACA,WAAWL;AAAA,QACX,iBAAetC;AAAA,QACf,kBAAgB4C,EAAiB;AAAA,QACjC,iBAAe7B;AAAA,QACf,iBAAeC;AAAA,QACf,UAAUL,IAAW,SAAY;AAAA,QACjC,iBAAeA;AAAA,QACd,GAAGqC;AAAA,MAAA;AAAA,IACN;AAAA,EACF,GACCU,GACH,IACEjD,KAAaC,MACb4C,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAO,gBAAA,mCACrB,QAAK,EAAA,IAAIjC,EAAc,GAAAb,CAAU,GAClC6C,gBAAAA,EAAA,cAAC,UAAK,IAAI/B,EAAA,GAAeb,CAAW,CACtC,CAEJ;AAEJ,GAEAoD,KAAexD;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setValue((max - min) / 2 + min);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(selected);\n  const [value, setValue] = useSafeNumberValue((maxValue - minValue) / 2 + minValue, minValue, maxValue);\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(value);\n    }\n  }, [value, selectedState]);\n\n  useEffect(() => {\n    if (selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValue(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    handleSelected();\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (value - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((value - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPostionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPostionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPostionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={value}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPostionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Slider/styles.module.scss

@@ -91,17 +91,19 @@ $mark-size: getSpacer(l);
       outline: 0.15rem solid $black;
     }
 
-    &::after {
-      content: '';
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 0.1rem solid $black;
-      border-radius: 10rem;
-      background-color: $blueberry600;
-
-      :hover > &,
-      :focus > & {
-        background-color: $blueberry700;
+    &--selected {
+      &::after {
+        content: '';
+        width: 1.25rem;
+        height: 1.25rem;
+        border: 0.1rem solid $black;
+        border-radius: 10rem;
+        background-color: $blueberry600;
+
+        :hover > &,
+        :focus > & {
+          background-color: $blueberry700;
+        }
       }
     }
 

package/components/Slider/styles.module.scss.d.ts

@@ -5,6 +5,7 @@ export type Styles = {
   'slider__emoji-container': string;
   slider__marker: string;
   'slider__marker--disabled': string;
+  'slider__marker--selected': string;
   slider__options: string;
   slider__title: string;
   slider__track: string;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/helsenorge/designsystem"
   },
   "homepage": "https://helsenorge.design",
-  "version": "6.1.3",
+  "version": "6.2.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {