@helsenorge/designsystem-react 5.12.0 → 6.0.0-beta.14

package/components/Select/Select.js

@@ -0,0 +1,69 @@
+import t from "react";
+import b from "classnames";
+import { FormMode as _, AnalyticsId as T, IconSize as $, AVERAGE_CHARACTER_WIDTH_PX as q } from "../../constants.js";
+import { useUuid as z } from "../../hooks/useUuid.js";
+import { getColor as f } from "../../theme/currys/color.js";
+import D from "../ErrorWrapper/ErrorWrapper.js";
+import { Icon as F } from "../Icon/Icon.js";
+import H from "../Icons/ChevronDown.js";
+import { renderLabel as L } from "../Label/Label.js";
+import e from "./styles.module.scss";
+const M = (a) => {
+  const r = "2rem";
+  return `calc(${a * q}px + ${r})`;
+}, V = (a, r) => r ? f("neutral", 500) : f(a ? "cherry" : "blueberry", 600), X = t.forwardRef(function(r, c) {
+  const {
+    afterLabelChildren: B,
+    className: v,
+    children: w,
+    concept: y = "normal",
+    disabled: o,
+    error: C,
+    errorText: s,
+    label: h,
+    selectId: i,
+    name: E = i,
+    mode: n = _.onwhite,
+    testId: I,
+    width: d,
+    required: m,
+    value: S,
+    defaultValue: N,
+    ...R
+  } = r, p = z(i), u = n === "onblueberry", l = n === "oninvalid" || !!s || !!C, W = V(l, !!o), g = d ? M(d) : void 0, x = b(
+    e["select-inner-wrapper"],
+    {
+      [e["select-inner-wrapper--transparent"]]: y === "transparent",
+      [e["select-inner-wrapper--on-blueberry"]]: u,
+      [e["select-inner-wrapper--invalid"]]: l,
+      [e["select-inner-wrapper--disabled"]]: o
+    },
+    v
+  ), A = b(e.select, {
+    [e["select--on-blueberry"]]: u,
+    [e["select--invalid"]]: l
+  });
+  return /* @__PURE__ */ t.createElement(D, { errorText: s }, /* @__PURE__ */ t.createElement("div", { "data-testid": I, "data-analyticsid": T.Select, className: e["select-wrapper"], style: { maxWidth: g } }, L(h, p, n, o), /* @__PURE__ */ t.createElement("div", { className: x }, /* @__PURE__ */ t.createElement(F, { className: e["select-arrow"], svgIcon: H, color: W, size: $.XSmall }), /* @__PURE__ */ t.createElement(
+    "select",
+    {
+      "aria-invalid": !!l,
+      id: p,
+      name: E,
+      className: A,
+      disabled: o,
+      ref: c,
+      required: m,
+      "aria-describedby": r["aria-describedby"] ?? void 0,
+      "aria-required": !!m,
+      value: S,
+      defaultValue: N,
+      ...R
+    },
+    w
+  ))));
+}), Z = X;
+export {
+  X as Select,
+  Z as default
+};
+//# sourceMappingURL=Select.js.map

package/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange'\n  > {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode, disabled)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MAA+B;AACxD,QAAMC,IAAe;AAErB,SAAO,QAAQD,IAAaE,CAA0B,QAAQD,CAAY;AAC5E,GAEME,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,oBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAT;AAAA,IACA,OAAAU;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAlB,GAEEmB,IAAOC,EAAQX,CAAQ,GACvBY,IAAcV,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACJ,KAAa,CAAC,CAACD,GACnDgB,IAAY5B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C2B,IAAWT,IAAQxB,EAAkBwB,CAAK,IAAI,QAE9CU,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGrB,MAAY;AAAA,MACjE,CAACqB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAG/B;AAAA,MACjD,CAAC+B,EAAa,gCAAgC,CAAC,GAAG9B;AAAA,IACpD;AAAA,IACAO;AAAA,EAAA,GAGIwB,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAG/B;AAAA,EAAA,CACpC;AAED,yCACGiC,GAAa,EAAA,WAAArB,EAAA,mCACX,OAAI,EAAA,eAAaM,GAAQ,oBAAkBgB,EAAY,QAAQ,WAAWH,EAAa,gBAAgB,GAAG,OAAO,EAAE,UAAAH,OACjHO,EAAYtB,GAAOW,GAAMR,GAAkBf,CAAQ,GACpDG,gBAAAA,EAAA,cAAC,SAAI,WAAWyB,qCACbO,GAAK,EAAA,WAAWL,EAAa,cAAc,GAAG,SAASM,GAAa,OAAOV,GAAW,MAAMW,EAAS,QAAQ,GAC9GlC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAIwB;AAAA,MACJ,MAAAT;AAAA,MACA,WAAWiB;AAAA,MACX,UAAA/B;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkBf,EAAM,kBAAkB,KAAK;AAAA,MAC/C,iBAAe,CAAC,CAACe;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,IAEHd;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAED8B,IAAepC;"}

package/components/Select/index.js

@@ -1,2 +1,7 @@
-import{S as o}from"../../Select.js";import{a as F}from"../../Select.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Icons/Icon.js";import"../Icons/ChevronDown.js";import"../../Label.js";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../utils/component.js";import"../../StatusDot.js";import"../../hooks/useBreakpoint.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"./styles.module.scss";export{F as Select,o as default};
+import t from "./Select.js";
+import { Select as f } from "./Select.js";
+export {
+  f as Select,
+  t as default
+};
 //# sourceMappingURL=index.js.map

package/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/ServiceMessage/ServiceMessage.d.ts

@@ -26,11 +26,6 @@ export interface ServiceMessageProps {
     variant?: NotificationPanelVariants;
     /** Sets the data-testid attribute. */
     testId?: string;
-    /**
-     * First of its type. Used to remove border-top
-     * @deprecated Har ingen effekt på komponenten
-     */
-    first?: boolean;
 }
 declare const ServiceMessage: React.FC<ServiceMessageProps>;
 export default ServiceMessage;

package/components/ServiceMessage/ServiceMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAWhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAsHjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ServiceMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAWhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAsHjE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/ServiceMessage/ServiceMessage.js

@@ -0,0 +1,106 @@
+import e, { useState as R } from "react";
+import u from "classnames";
+import { useBreakpoint as w } from "../../hooks/useBreakpoint.js";
+import { useHover as h } from "../../hooks/useHover.js";
+import { useUuid as y } from "../../hooks/useUuid.js";
+import { getColor as I } from "../../theme/currys/color.js";
+import { breakpoints as M } from "../../theme/grid.js";
+import { palette as c } from "../../theme/palette.js";
+import { getAriaLabelAttributes as X } from "../../utils/accessibility.js";
+import F from "../Close/Close.js";
+import { Icon as n } from "../Icon/Icon.js";
+import { IconSize as N } from "../../constants.js";
+import L from "../Icons/CheckFill.js";
+import A from "../Icons/ChevronDown.js";
+import U from "../Icons/ChevronUp.js";
+import $ from "../Icons/ErrorSignFill.js";
+import j from "../Icons/Forward.js";
+import B from "../Icons/InfoSignFill.js";
+import q from "../Icons/TriangleX.js";
+import D from "../Icons/X.js";
+import r from "./styles.module.scss";
+const G = ({ label: l, variant: t, id: m, hasExpander: s, isExpanded: i, dismissable: g, onExpand: v, onDismiss: f, closeBtnText: _ }) => {
+  const d = w(), { isHovered: a, hoverRef: p } = h(), o = d < M.lg ? N.XSmall : N.Small, C = {
+    info: /* @__PURE__ */ e.createElement(n, { svgIcon: B, color: c.blueberry700, hoverColor: c.blueberry700, size: o, isHovered: a }),
+    warn: /* @__PURE__ */ e.createElement(n, { svgIcon: $, color: c.banana700, hoverColor: c.banana700, size: o, isHovered: a }),
+    alert: /* @__PURE__ */ e.createElement(n, { svgIcon: q, color: c.cherry700, hoverColor: c.cherry700, size: o, isHovered: a }),
+    success: /* @__PURE__ */ e.createElement(n, { svgIcon: L, color: c.kiwi900, hoverColor: c.kiwi900, size: o, isHovered: a })
+  }, b = s ? "button" : "span", E = u(
+    r["service-message__label-container"],
+    r[`service-message__label-container--${t}`],
+    s && r["service-message__label-container--has-expander"]
+  );
+  return /* @__PURE__ */ e.createElement("div", { className: E, ref: p }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__label"] }, C[t], /* @__PURE__ */ e.createElement("h1", { className: r["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
+    b,
+    {
+      className: r["service-message__toggle"],
+      onClick: s ? v : void 0,
+      "aria-expanded": s ? i : void 0
+    },
+    l
+  )), s && /* @__PURE__ */ e.createElement(n, { size: o, svgIcon: i ? U : A, isHovered: a }), !s && g && /* @__PURE__ */ e.createElement(F, { onClick: f, ariaLabel: _, className: r["service-message__close"] }))))));
+}, J = ({ info: l, extraInfo: t, urlTitle: m, url: s, target: i, dismissable: g, closeBtnText: v, onDismiss: f }) => {
+  const { hoverRef: _, isHovered: d } = h(), { hoverRef: a, isHovered: p } = h(), o = s && m;
+  return /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__content"] }, l && /* @__PURE__ */ e.createElement("p", { className: r["service-message__info"] }, l), t && /* @__PURE__ */ e.createElement("p", { className: u(r["service-message__info"], r["service-message__info--extra"]) }, t), /* @__PURE__ */ e.createElement("div", { className: r["service-message__actions"] }, o && /* @__PURE__ */ e.createElement("a", { className: r["service-message__action"], href: s, ref: _, target: i }, m, /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: j, color: I("blueberry", 700), isHovered: d })), g && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      ref: a,
+      className: u(r["service-message__action"], r["service-message__action--close"]),
+      "aria-label": v,
+      onClick: f
+    },
+    v,
+    /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: D, color: I("blueberry", 700), isHovered: p })
+  ))))));
+}, K = ({
+  label: l,
+  dismissable: t = !0,
+  onDismiss: m,
+  info: s,
+  extraInfo: i,
+  urlTitle: g,
+  url: v,
+  target: f = "_self",
+  closeBtnText: _ = "fjern melding",
+  expanderOpenFromStart: d = !1,
+  variant: a = "alert",
+  testId: p
+}) => {
+  const [o, C] = R(d), b = y(), E = !!s || !!i, S = a === "alert" ? "alert" : "region", k = X({ label: l, id: b }), z = () => {
+    E && C(!o);
+  }, H = u(
+    r["service-message"],
+    r[`service-message--${a}`],
+    o && r["service-message--expanded"]
+  );
+  return /* @__PURE__ */ e.createElement("div", { className: H, role: S, ...k, "data-testid": p }, /* @__PURE__ */ e.createElement(
+    G,
+    {
+      label: l,
+      variant: a,
+      id: b,
+      hasExpander: E,
+      isExpanded: o,
+      dismissable: t,
+      onExpand: z,
+      onDismiss: m,
+      closeBtnText: _
+    }
+  ), E && o && /* @__PURE__ */ e.createElement(
+    J,
+    {
+      info: s,
+      extraInfo: i,
+      urlTitle: g,
+      url: v,
+      target: f,
+      dismissable: t,
+      onDismiss: m,
+      closeBtnText: _
+    }
+  ));
+}, _e = K;
+export {
+  _e as default
+};
+//# sourceMappingURL=ServiceMessage.js.map

package/components/ServiceMessage/ServiceMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceMessage.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const variantToIconMap = {\n    info: (\n      <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} isHovered={isHovered} />\n    ),\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} isHovered={isHovered} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} isHovered={isHovered} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} isHovered={isHovered} />,\n  };\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {variantToIconMap[variant]}\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(\n    styles['service-message'],\n    styles[`service-message--${variant}`],\n    isExpanded && styles[`service-message--expanded`]\n  );\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","CustomTag","labelContainerClasses","classNames","styles","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes","ServiceMessage$1"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsCA,MAAMA,IAA8B,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,IAAAC,GAAI,aAAAC,GAAa,YAAAC,GAAY,aAAAC,GAAa,UAAAC,GAAU,WAAAC,GAAW,cAAAC,EAAA,MAAmB;AACvI,QAAMC,IAAaC,KACb,EAAE,WAAAC,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnDC,IAAWL,IAAaM,EAAY,KAAKC,EAAS,SAASA,EAAS,OACpEC,IAAmB;AAAA,IACvB,MACEC,gBAAAA,EAAA,cAACC,GAAK,EAAA,SAASC,GAAc,OAAOC,EAAQ,cAAc,YAAYA,EAAQ,cAAc,MAAMP,GAAU,WAAAH,GAAsB;AAAA,IAEpI,MAAMO,gBAAAA,EAAA,cAACC,GAAK,EAAA,SAASG,GAAe,OAAOD,EAAQ,WAAW,YAAYA,EAAQ,WAAW,MAAMP,GAAU,WAAAH,GAAsB;AAAA,IACnI,OAAOO,gBAAAA,EAAA,cAACC,GAAK,EAAA,SAASI,GAAW,OAAOF,EAAQ,WAAW,YAAYA,EAAQ,WAAW,MAAMP,GAAU,WAAAH,GAAsB;AAAA,IAChI,SAASO,gBAAAA,EAAA,cAACC,GAAK,EAAA,SAASK,GAAW,OAAOH,EAAQ,SAAS,YAAYA,EAAQ,SAAS,MAAMP,GAAU,WAAAH,GAAsB;AAAA,EAAA,GAE1Hc,IAAYtB,IAAc,WAAW,QAErCuB,IAAwBC;AAAA,IAC5BC,EAAO,kCAAkC;AAAA,IACzCA,EAAO,qCAAqC3B,CAAO,EAAE;AAAA,IACrDE,KAAeyB,EAAO,gDAAgD;AAAA,EAAA;AAGxE,yCACG,OAAI,EAAA,WAAWF,GAAuB,KAAKd,KACzCM,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,EAAO,4BAA4B,KACjDV,gBAAAA,EAAA,cAAC,SAAI,WAAWU,EAAO,sBAAsB,EAC3C,GAAAV,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWU,EAAO,sBAAsB,EAAA,mCAC1C,OAAI,EAAA,WAAWA,EAAO,wBAAwB,EAAA,GAC5CX,EAAiBhB,CAAO,GACxBiB,gBAAAA,EAAA,cAAA,MAAA,EAAG,WAAWU,EAAO,wBAAwB,GAAG,IAAA1B,EAC/C,GAAAgB,gBAAAA,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,WAAWG,EAAO,yBAAyB;AAAA,MAC3C,SAASzB,IAAcG,IAAW;AAAA,MAClC,iBAAeH,IAAcC,IAAa;AAAA,IAAA;AAAA,IAEzCJ;AAAA,EAAA,CAEL,GACCG,KAAee,gBAAAA,EAAA,cAACC,GAAK,EAAA,MAAML,GAAU,SAASV,IAAayB,IAAYC,GAAa,WAAAnB,EAAsB,CAAA,GAC1G,CAACR,KAAeE,KACfa,gBAAAA,EAAA,cAACa,GAAM,EAAA,SAASxB,GAAW,WAAWC,GAAc,WAAWoB,EAAO,wBAAwB,EAAG,CAAA,CAErG,CACF,CACF,CACF,CACF;AAEJ,GAaMI,IAAkC,CAAC,EAAE,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,KAAAC,GAAK,QAAAC,GAAQ,aAAAhC,GAAa,cAAAG,GAAc,WAAAD,QAAgB;AAC5H,QAAM,EAAE,UAAU+B,GAAa,WAAWC,EAAA,IAA8B1B,KAClE,EAAE,UAAU2B,GAAgB,WAAWC,EAAA,IAAyB5B,KAEhE6B,IAASN,KAAOD;AAEtB,yCACG,OAAI,EAAA,WAAWP,EAAO,4BAA4B,KAChDV,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWU,EAAO,sBAAsB,EAC3C,GAAAV,gBAAAA,EAAA,cAAC,SAAI,WAAWU,EAAO,sBAAsB,EAC3C,GAAAV,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWU,EAAO,0BAA0B,EAAA,GAC9CK,KAASf,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAWU,EAAO,uBAAuB,KAAIK,CAAK,GAC7DC,KACChB,gBAAAA,EAAA,cAAC,OAAE,WAAWS,EAAWC,EAAO,uBAAuB,GAAGA,EAAO,8BAA8B,CAAC,KAAIM,CAAU,GAEhHhB,gBAAAA,EAAA,cAAC,SAAI,WAAWU,EAAO,0BAA0B,KAC9Cc,KACExB,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAWU,EAAO,yBAAyB,GAAG,MAAMQ,GAAK,KAAKE,GAAa,QAAAD,KAC3EF,GACDjB,gBAAAA,EAAA,cAACC,KAAK,MAAMH,EAAS,QAAQ,SAAS2B,GAAS,OAAOC,EAAS,aAAa,GAAG,GAAG,WAAWL,GAA2B,CAC1H,GAGDlC,KACCa,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKsB;AAAA,MACL,WAAWb,EAAWC,EAAO,yBAAyB,GAAGA,EAAO,gCAAgC,CAAC;AAAA,MACjG,cAAYpB;AAAA,MACZ,SAASD;AAAA,IAAA;AAAA,IAERC;AAAA,IACAU,gBAAAA,EAAA,cAAAC,GAAA,EAAK,MAAMH,EAAS,QAAQ,SAAS6B,GAAG,OAAOD,EAAS,aAAa,GAAG,GAAG,WAAWH,GAAsB;AAAA,EAAA,CAGnH,CACF,CACF,CACF,CACF;AAEJ,GA6BMK,IAAgD,CAAC;AAAA,EACrD,OAAA9C;AAAA,EACA,aAAAK,IAAc;AAAA,EACd,WAAAE;AAAA,EACA,MAAA0B;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAA7B,IAAe;AAAA,EACf,uBAAAuC,IAAwB;AAAA,EACxB,SAAA9C,IAAU;AAAA,EACV,QAAA+C;AACF,MAAM;AACJ,QAAM,CAAC5C,GAAY6C,CAAa,IAAIC,EAAkBH,CAAqB,GAErEI,IAAUC,KACVjD,IAAc,CAAC,CAAC8B,KAAQ,CAAC,CAACC,GAE1BmB,IAAWpD,MAAY,UAAU,UAAU,UAC3CqD,IAAsBC,EAAuB,EAAE,OAAAvD,GAAO,IAAImD,GAAS,GAEnEK,IAAc,MAAY;AACf,IAAArD,KAAA8C,EAAc,CAAC7C,CAAU;AAAA,EAAA,GAGpCqD,IAAU9B;AAAA,IACdC,EAAO,iBAAiB;AAAA,IACxBA,EAAO,oBAAoB3B,CAAO,EAAE;AAAA,IACpCG,KAAcwB,EAAO,2BAA2B;AAAA,EAAA;AAIhD,SAAAV,gBAAAA,EAAA,cAAC,SAAI,WAAWuC,GAAS,MAAMJ,GAAW,GAAGC,GAAqB,eAAaN,EAC7E,GAAA9B,gBAAAA,EAAA;AAAA,IAACnB;AAAA,IAAA;AAAA,MACC,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,IAAIkD;AAAA,MACJ,aAAAhD;AAAA,MACA,YAAAC;AAAA,MACA,aAAAC;AAAA,MACA,UAAUmD;AAAA,MACV,WAAAjD;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,EAAA,GAEDL,KAAeC,KACdc,gBAAAA,EAAA;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,KAAAC;AAAA,MACA,QAAAC;AAAA,MACA,aAAAhC;AAAA,MACA,WAAAE;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,EAAA,CAGN;AAEJ,GAEAkD,KAAeZ;"}

package/components/ServiceMessage/index.js

@@ -1,2 +1,5 @@
-import e,{useState as R}from"react";import u from"classnames";import{useBreakpoint as w}from"../../hooks/useBreakpoint.js";import{useHover as h}from"../../hooks/useHover.js";import{useUuid as y}from"../../hooks/useUuid.js";import{getColor as I}from"../../theme/currys/color.js";import{breakpoints as M}from"../../theme/grid.js";import{palette as c}from"../../theme/palette.js";import{getAriaLabelAttributes as X}from"../../utils/accessibility.js";import{C as F}from"../../Close.js";import{Icon as n}from"../Icons/Icon.js";import{IconSize as N}from"../../constants.js";import L from"../Icons/CheckFill.js";import A from"../Icons/ChevronDown.js";import U from"../Icons/ChevronUp.js";import $ from"../Icons/ErrorSignFill.js";import j from"../Icons/Forward.js";import B from"../Icons/InfoSignFill.js";import q from"../Icons/TriangleX.js";import D from"../Icons/X.js";import r from"./styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Close/styles.module.scss";const G=({label:m,variant:t,id:i,hasExpander:s,isExpanded:l,dismissable:g,onExpand:v,onDismiss:p,closeBtnText:_})=>{const f=w(),{isHovered:a,hoverRef:d}=h(),o=f<M.lg?N.XSmall:N.Small,C={info:e.createElement(n,{svgIcon:B,color:c.blueberry700,hoverColor:c.blueberry700,size:o,isHovered:a}),warn:e.createElement(n,{svgIcon:$,color:c.banana700,hoverColor:c.banana700,size:o,isHovered:a}),alert:e.createElement(n,{svgIcon:q,color:c.cherry700,hoverColor:c.cherry700,size:o,isHovered:a}),success:e.createElement(n,{svgIcon:L,color:c.kiwi900,hoverColor:c.kiwi900,size:o,isHovered:a})},b=s?"button":"span",E=u(r["service-message__label-container"],r[`service-message__label-container--${t}`],s&&r["service-message__label-container--has-expander"]);return e.createElement("div",{className:E,ref:d},e.createElement("div",{className:r["service-message__container"]},e.createElement("div",{className:r["service-message__row"]},e.createElement("div",{className:r["service-message__col"]},e.createElement("div",{className:r["service-message__label"]},C[t],e.createElement("h1",{className:r["service-message__title"],id:i},e.createElement(b,{className:r["service-message__toggle"],onClick:s?v:void 0,"aria-expanded":s?l:void 0},m)),s&&e.createElement(n,{size:o,svgIcon:l?U:A,isHovered:a}),!s&&g&&e.createElement(F,{onClick:p,ariaLabel:_,className:r["service-message__close"]}))))))},J=({info:m,extraInfo:t,urlTitle:i,url:s,target:l,dismissable:g,closeBtnText:v,onDismiss:p})=>{const{hoverRef:_,isHovered:f}=h(),{hoverRef:a,isHovered:d}=h(),o=s&&i;return e.createElement("div",{className:r["service-message__container"]},e.createElement("div",{className:r["service-message__row"]},e.createElement("div",{className:r["service-message__col"]},e.createElement("div",{className:r["service-message__content"]},m&&e.createElement("p",{className:r["service-message__info"]},m),t&&e.createElement("p",{className:u(r["service-message__info"],r["service-message__info--extra"])},t),e.createElement("div",{className:r["service-message__actions"]},o&&e.createElement("a",{className:r["service-message__action"],href:s,ref:_,target:l},i,e.createElement(n,{size:N.XSmall,svgIcon:j,color:I("blueberry",700),isHovered:f})),g&&e.createElement("button",{ref:a,className:u(r["service-message__action"],r["service-message__action--close"]),"aria-label":v,onClick:p},v,e.createElement(n,{size:N.XSmall,svgIcon:D,color:I("blueberry",700),isHovered:d})))))))},K=({label:m,dismissable:t=!0,onDismiss:i,info:s,extraInfo:l,urlTitle:g,url:v,target:p="_self",closeBtnText:_="fjern melding",expanderOpenFromStart:f=!1,variant:a="alert",testId:d})=>{const[o,C]=R(f),b=y(),E=!!s||!!l,S=a==="alert"?"alert":"region",k=X({label:m,id:b}),z=()=>{E&&C(!o)},H=u(r["service-message"],r[`service-message--${a}`],o&&r["service-message--expanded"]);return e.createElement("div",{className:H,role:S,...k,"data-testid":d},e.createElement(G,{label:m,variant:a,id:b,hasExpander:E,isExpanded:o,dismissable:t,onExpand:z,onDismiss:i,closeBtnText:_}),E&&o&&e.createElement(J,{info:s,extraInfo:l,urlTitle:g,url:v,target:p,dismissable:t,onDismiss:i,closeBtnText:_}))},ue=K;export{ue as default};
+import r from "./ServiceMessage.js";
+export {
+  r as default
+};
 //# sourceMappingURL=index.js.map

package/components/ServiceMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const variantToIconMap = {\n    info: (\n      <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} isHovered={isHovered} />\n    ),\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} isHovered={isHovered} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} isHovered={isHovered} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} isHovered={isHovered} />,\n  };\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {variantToIconMap[variant]}\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * First of its type. Used to remove border-top\n   * @deprecated Har ingen effekt på komponenten\n   */\n  first?: boolean;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(\n    styles['service-message'],\n    styles[`service-message--${variant}`],\n    isExpanded && styles[`service-message--expanded`]\n  );\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","CustomTag","labelContainerClasses","classNames","styles","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes","ServiceMessage$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/SharingStatus/SharingStatus.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PaletteNames } from '../../theme/palette';
-import { SvgIcon } from '../Icons/Icon';
+import { SvgIcon } from '../Icon';
 export type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral' | 'blueberry' | 'banana'>;
 export interface SharingStatusProps {
     /** Color choices represent variants of sharingstatus */

package/components/SharingStatus/SharingStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SharingStatus.d.ts","sourceRoot":"","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,YAAY,EAAW,MAAM,qBAAqB,CAAC;AAC5D,OAAa,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAI9C,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAE/G,MAAM,WAAW,kBAAkB;IACjC,wDAAwD;IACxD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SharingStatus.d.ts","sourceRoot":"","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,YAAY,EAAW,MAAM,qBAAqB,CAAC;AAC5D,OAAa,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAE/G,MAAM,WAAW,kBAAkB;IACjC,wDAAwD;IACxD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/SharingStatus/SharingStatus.js

@@ -0,0 +1,16 @@
+import t from "react";
+import a from "classnames";
+import { AnalyticsId as d, IconSize as h } from "../../constants.js";
+import { palette as _ } from "../../theme/palette.js";
+import { Icon as g } from "../Icon/Icon.js";
+import s from "./styles.module.scss";
+const S = (r) => {
+  const { color: e = "blueberry", icon: l, children: n, className: o, testId: c, wrapText: i } = r, m = a(s["sharing-status"], o), u = a(s["sharing-status__dot"], s[`sharing-status__dot--${e}`]), p = a(s["sharing-status__label"], s[`sharing-status__label--${e}`], {
+    [s["sharing-status__label--wrap"]]: i
+  });
+  return /* @__PURE__ */ t.createElement("span", { className: m, "data-testid": c, "data-analyticsid": d.SharingStatus }, /* @__PURE__ */ t.createElement("span", { className: u }, /* @__PURE__ */ t.createElement(g, { color: _.white, svgIcon: l, size: h.XXSmall })), /* @__PURE__ */ t.createElement("span", { className: p }, n));
+}, w = S;
+export {
+  w as default
+};
+//# sourceMappingURL=SharingStatus.js.map

package/components/SharingStatus/SharingStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharingStatus.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral' | 'blueberry' | 'banana'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'blueberry', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":["SharingStatus","props","color","icon","children","className","testId","wrapText","sharingStatusClasses","classNames","styles","dotClasses","labelClasses","React","AnalyticsId","Icon","palette","IconSize","SharingStatus$1"],"mappings":";;;;;;AA2BA,MAAMA,IAA8C,CAASC,MAAA;AACrD,QAAA,EAAE,OAAAC,IAAQ,aAAa,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,GAAQ,UAAAC,EAAa,IAAAN,GAEvEO,IAAuBC,EAAWC,EAAO,gBAAgB,GAAGL,CAAS,GACrEM,IAAaF,EAAWC,EAAO,qBAAqB,GAAGA,EAAO,wBAAwBR,CAAK,EAAE,CAAC,GAC9FU,IAAeH,EAAWC,EAAO,uBAAuB,GAAGA,EAAO,0BAA0BR,CAAK,EAAE,GAAG;AAAA,IAC1G,CAACQ,EAAO,6BAA6B,CAAC,GAAGH;AAAA,EAAA,CAC1C;AAED,SACGM,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWL,GAAsB,eAAaF,GAAQ,oBAAkBQ,EAAY,cACxF,GAAAD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWF,KACdE,gBAAAA,EAAA,cAAAE,GAAA,EAAK,OAAOC,EAAQ,OAAO,SAASb,GAAM,MAAMc,EAAS,QAAA,CAAS,CACrE,GACCJ,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWD,EAAA,GAAeR,CAAS,CAC3C;AAEJ,GAEAc,IAAelB;"}

package/components/SharingStatus/index.js

@@ -1,2 +1,5 @@
-import s from"react";import a from"classnames";import{AnalyticsId as d,IconSize as h}from"../../constants.js";import{palette as _}from"../../theme/palette.js";import{Icon as g}from"../Icons/Icon.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const S=r=>{const{color:e="blueberry",icon:o,children:l,className:n,testId:i,wrapText:c}=r,m=a(t["sharing-status"],n),p=a(t["sharing-status__dot"],t[`sharing-status__dot--${e}`]),u=a(t["sharing-status__label"],t[`sharing-status__label--${e}`],{[t["sharing-status__label--wrap"]]:c});return s.createElement("span",{className:m,"data-testid":i,"data-analyticsid":d.SharingStatus},s.createElement("span",{className:p},s.createElement(g,{color:_.white,svgIcon:o,size:h.XXSmall})),s.createElement("span",{className:u},l))},x=S;export{x as default};
+import a from "./SharingStatus.js";
+export {
+  a as default
+};
 //# sourceMappingURL=index.js.map

package/components/SharingStatus/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/SharingStatus/SharingStatus.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icons/Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral' | 'blueberry' | 'banana'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'blueberry', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n"],"names":["SharingStatus","props","color","icon","children","className","testId","wrapText","sharingStatusClasses","classNames","styles","dotClasses","labelClasses","React","AnalyticsId","Icon","palette","IconSize","SharingStatus$1"],"mappings":"mUA2BA,MAAMA,EAAuDC,GAAA,CACrD,KAAA,CAAE,MAAAC,EAAQ,YAAa,KAAAC,EAAM,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAQ,SAAAC,CAAa,EAAAN,EAEvEO,EAAuBC,EAAWC,EAAO,gBAAgB,EAAGL,CAAS,EACrEM,EAAaF,EAAWC,EAAO,qBAAqB,EAAGA,EAAO,wBAAwBR,CAAK,EAAE,CAAC,EAC9FU,EAAeH,EAAWC,EAAO,uBAAuB,EAAGA,EAAO,0BAA0BR,CAAK,EAAE,EAAG,CAC1G,CAACQ,EAAO,6BAA6B,CAAC,EAAGH,CAAA,CAC1C,EAED,OACGM,EAAA,cAAA,OAAA,CAAK,UAAWL,EAAsB,cAAaF,EAAQ,mBAAkBQ,EAAY,aACxF,EAAAD,EAAA,cAAC,OAAK,CAAA,UAAWF,GACdE,EAAA,cAAAE,EAAA,CAAK,MAAOC,EAAQ,MAAO,QAASb,EAAM,KAAMc,EAAS,OAAA,CAAS,CACrE,EACCJ,EAAA,cAAA,OAAA,CAAK,UAAWD,CAAA,EAAeR,CAAS,CAC3C,CAEJ,EAEAc,EAAelB"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Slider/Slider.js

@@ -0,0 +1,165 @@
+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);
+  };
+  return h(() => {
+    n((l - f) / 2 + f);
+  }, [f, l]), [v, E];
+}, Z = ({
+  title: u,
+  ariaLabel: f,
+  labelLeft: l,
+  labelRight: v,
+  disabled: n = !1,
+  onChange: E,
+  steps: t,
+  step: _ = 1,
+  minValue: i = 0,
+  maxValue: s = t ? t.length - 1 : 100,
+  testId: $
+}) => {
+  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);
+    };
+    return document.addEventListener("pointerup", r), () => {
+      document.removeEventListener("pointerup", r);
+    };
+  }, []);
+  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;
+  };
+  h(() => {
+    const r = (e) => {
+      if (!n && A) {
+        const c = D(e.clientX);
+        m(c);
+      }
+    };
+    return document.addEventListener("pointermove", r), () => {
+      document.removeEventListener("pointermove", r);
+    };
+  }, [A]), h(() => {
+    !n && E && E(d);
+  }, [d]);
+  const B = (r) => {
+    if (n)
+      return;
+    let e = !1;
+    switch (r.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        m(d - _), e = !0;
+        break;
+      case "PageDown":
+        m(d - C), e = !0;
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        m(d + _), e = !0;
+        break;
+      case "PageUp":
+        m(d + C), e = !0;
+        break;
+      case "Home":
+        m(i), e = !0;
+        break;
+      case "End":
+        m(s), e = !0;
+        break;
+    }
+    e && (r.preventDefault(), r.stopPropagation());
+  }, X = (r) => {
+    var c;
+    if (n)
+      return;
+    const e = D(r.clientX);
+    m(e), (c = b.current) == null || c.focus();
+  }, T = (r) => {
+    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;
+    }
+  }, H = J({
+    label: f,
+    id: (() => {
+      if (u && l && v)
+        return [k, y, w].join(" ");
+      if (u && l)
+        return [k, y].join(" ");
+      if (u && v)
+        return [k, w].join(" ");
+      if (u)
+        return k;
+    })(),
+    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(
+    "div",
+    {
+      "aria-hidden": !0,
+      key: "emoji" + e,
+      className: o.slider__emoji,
+      style: P(e, t.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(
+    "div",
+    {
+      "aria-hidden": !0,
+      key: "label" + e,
+      className: o.slider__value,
+      style: P(e, t.length)
+    },
+    r.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(
+    "div",
+    {
+      ref: N,
+      className: S(o["slider__track-wrapper"], n && o["slider__track-wrapper--disabled"]),
+      onClick: X,
+      onPointerDown: T
+    },
+    /* @__PURE__ */ a.createElement("div", { className: S(o.slider__track, n && o["slider__track--disabled"]) }, W()),
+    /* @__PURE__ */ a.createElement(
+      "div",
+      {
+        role: n ? void 0 : "slider",
+        ref: b,
+        className: S(o.slider__marker, n && o["slider__marker--disabled"]),
+        style: {
+          left: `${z}px`
+        },
+        onKeyDown: B,
+        "aria-valuenow": d,
+        "aria-valuetext": K(),
+        "aria-valuemin": i,
+        "aria-valuemax": s,
+        tabIndex: n ? void 0 : 0,
+        "aria-disabled": n,
+        ...H
+      }
+    )
+  ), 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;
+export {
+  Z as Slider,
+  le as default
+};
+//# sourceMappingURL=Slider.js.map

package/components/Slider/Slider.js.map

@@ -0,0 +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":"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"}

package/components/Slider/index.js

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