@helsenorge/designsystem-react 2.4.0 → 2.5.0

package/Button.js

@@ -1,2 +1,2 @@
-import e,{useRef as lt,useEffect as it}from"react";import{AnalyticsId as V,IconSize as k}from"./constants.js";import{i as ct}from"./uuid.js";import{getColor as i}from"./theme/currys/color.js";import{Icon as ut}from"./components/Icons/Icon.js";import{useHover as $}from"./hooks/useHover.js";import{useIcons as mt}from"./hooks/useIcons.js";import{useBreakpoint as dt}from"./hooks/useBreakpoint.js";import{breakpoints as bt}from"./theme/grid.js";import w from"classnames";import t from"./components/Button/styles.module.scss";import pt from"./components/Icons/ArrowRight.js";import{useSize as ft}from"./hooks/useSize.js";const ht=(o,n,a,d,s,v)=>v&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":d==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?k.Small:o?k.Medium:k.XSmall,gt=(o,n,a)=>{if(!a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop p\xE5 Button uten tekst for \xE5 opprettholde UU krav")},Mt=e.forwardRef(function(n,a){const{ariaLabel:d,id:s,children:v,wrapperClassName:j,className:q,arrow:E=!1,concept:B="normal",disabled:b=!1,ellipsis:x=!1,fluid:D=!1,htmlMarkup:C="button",mode:P="onlight",onClick:R,size:X="medium",variant:I="fill",href:G,tabIndex:S,testId:z,target:M,type:J="button",...A}=n,[p,f,F]=mt(e.Children.toArray(v)),{hoverRef:W,isHovered:K}=C==="button"?$(a):$(a),H=lt(null),c=ft(H),l=!!(p||f)&&!F,Q=p&&(f||E)&&!l,y=P==="ondark",h=dt()<bt.md,L=B==="destructive"&&!b,Y=I==="outline",u=I==="borderless",Z=ht(I==="fill",u,b,B,y,h),O=E&&!u,m=X==="large"&&!L&&!u,tt={...A},T=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:D||x},j),et=w(t.button,{[t["button--destructive"]]:L,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:p&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:O,[t["button--on-dark"]]:y},q),ot=w(t.button__text,{[t["button__text--ellipsis"]]:x}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{gt(l,d,ct())},[]);const _=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("div",{className:ot,ref:H},b&&u&&e.createElement("div",{className:rt},e.createElement("div",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?d:F))},U=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:et},_(p,N(m,h),l?void 0:t["button__left-icon"]),nt(),O?_(e.createElement(ut,{svgIcon:pt}),N(m,h),t.button__arrow):_(f,N(m,h),t["button__right-icon"])));return e.createElement(e.Fragment,null,C==="button"&&e.createElement("button",{id:s,onClick:R,disabled:b,"data-testid":z,"data-analyticsid":V.Button,className:T,ref:W,tabIndex:S,type:J,...tt},U()),C==="a"&&e.createElement("a",{id:s,onClick:R,"data-testid":z,"data-analyticsid":V.Button,className:T,href:G,target:M,rel:M==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:S,...A},U()))});export{Mt as B};
+import e,{useRef as lt,useEffect as it}from"react";import{AnalyticsId as V,IconSize as k}from"./constants.js";import{isTest as ct}from"./utils/environment.js";import{getColor as i}from"./theme/currys/color.js";import{Icon as ut}from"./components/Icons/Icon.js";import{useHover as $}from"./hooks/useHover.js";import{useIcons as mt}from"./hooks/useIcons.js";import{useBreakpoint as dt}from"./hooks/useBreakpoint.js";import{breakpoints as bt}from"./theme/grid.js";import w from"classnames";import t from"./components/Button/styles.module.scss";import pt from"./components/Icons/ArrowRight.js";import{useSize as ft}from"./hooks/useSize.js";const ht=(o,n,a,d,s,v)=>v&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":d==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?k.Small:o?k.Medium:k.XSmall,gt=(o,n,a)=>{if(!a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop p\xE5 Button uten tekst for \xE5 opprettholde UU krav")},Mt=e.forwardRef(function(n,a){const{ariaLabel:d,id:s,children:v,wrapperClassName:j,className:q,arrow:E=!1,concept:B="normal",disabled:b=!1,ellipsis:x=!1,fluid:D=!1,htmlMarkup:C="button",mode:P="onlight",onClick:R,size:X="medium",variant:I="fill",href:G,tabIndex:S,testId:z,target:M,type:J="button",...A}=n,[p,f,F]=mt(e.Children.toArray(v)),{hoverRef:W,isHovered:K}=C==="button"?$(a):$(a),H=lt(null),c=ft(H),l=!!(p||f)&&!F,Q=p&&(f||E)&&!l,y=P==="ondark",h=dt()<bt.md,L=B==="destructive"&&!b,Y=I==="outline",u=I==="borderless",Z=ht(I==="fill",u,b,B,y,h),O=E&&!u,m=X==="large"&&!L&&!u,tt={...A},T=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:D||x},j),et=w(t.button,{[t["button--destructive"]]:L,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:p&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:O,[t["button--on-dark"]]:y},q),ot=w(t.button__text,{[t["button__text--ellipsis"]]:x}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{gt(l,d,ct())},[]);const _=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("div",{className:ot,ref:H},b&&u&&e.createElement("div",{className:rt},e.createElement("div",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?d:F))},U=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:et},_(p,N(m,h),l?void 0:t["button__left-icon"]),nt(),O?_(e.createElement(ut,{svgIcon:pt}),N(m,h),t.button__arrow):_(f,N(m,h),t["button__right-icon"])));return e.createElement(e.Fragment,null,C==="button"&&e.createElement("button",{id:s,onClick:R,disabled:b,"data-testid":z,"data-analyticsid":V.Button,className:T,ref:W,tabIndex:S,type:J,...tt},U()),C==="a"&&e.createElement("a",{id:s,onClick:R,"data-testid":z,"data-analyticsid":V.Button,className:T,href:G,target:M,rel:M==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:S,...A},U()))});export{Mt as B};
 //# sourceMappingURL=Button.js.map

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport { getColor } from '../../theme/currys/color';\nimport Icon, { IconProps, IconSize } from './../Icons/';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { breakpoints } from '../../theme/grid';\nimport classNames from 'classnames';\n\nimport buttonStyles from './styles.module.scss';\nimport ArrowRight from '../Icons/ArrowRight';\nimport { useSize } from '../../hooks/useSize';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, testEnv: boolean) => {\n  if (!testEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...(restProps as React.HtmlHTMLAttributes<HTMLButtonElement>) };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, isTest());\n  }, []);\n\n  const renderIcon = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = () => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <div className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <div className={diagonalClasses}>\n            <div style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </div>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </div>\n    );\n  };\n\n  const renderbuttonContentWrapper = () => {\n    return (\n      <>\n        <div className={buttonClasses}>\n          {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n          {renderButtonContent()}\n          {hasArrow\n            ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n            : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","testEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport { getColor } from '../../theme/currys/color';\nimport Icon, { IconProps, IconSize } from './../Icons/';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { breakpoints } from '../../theme/grid';\nimport classNames from 'classnames';\n\nimport buttonStyles from './styles.module.scss';\nimport ArrowRight from '../Icons/ArrowRight';\nimport { useSize } from '../../hooks/useSize';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, testEnv: boolean) => {\n  if (!testEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...(restProps as React.HtmlHTMLAttributes<HTMLButtonElement>) };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, isTest());\n  }, []);\n\n  const renderIcon = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = () => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <div className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <div className={diagonalClasses}>\n            <div style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </div>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </div>\n    );\n  };\n\n  const renderbuttonContentWrapper = () => {\n    return (\n      <>\n        <div className={buttonClasses}>\n          {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n          {renderButtonContent()}\n          {hasArrow\n            ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n            : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","testEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [2.4.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.3.0&targetVersion=GTv2.4.0) (2022-11-05)
+
+
+### Features
+
+*  linklist.link har prop for linkRef ([b86370c](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/b86370ccb3576c44c7ade357022b801d1407a9af)), closes [#287467](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/287467)
+
+
+### Bug Fixes
+
+*  hjelpeboble plasseres riktig i scrollbar tabell ([6b96b04](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/6b96b046782494e2b2586cb158874e46602c5249)), closes [#288142](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/288142)
+*  modal setter fokus automatisk til første fokuserbare element ([88bb15c](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/88bb15cd9de0fb0f2a78db7a4621da1e16f31374)), closes [#286778](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/286778)
+
 ## [2.3.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.2.1&targetVersion=GTv2.3.0) (2022-10-31)
 
 

package/FormGroup.js

@@ -1,2 +1,2 @@
-import e from"react";import i from"classnames";import a from"./components/FormGroup/styles.module.scss";import{C as g}from"./Checkbox.js";import{FormMode as E,FormVariant as _,AnalyticsId as b}from"./constants.js";import{R as y}from"./RadioButton.js";import{I as k}from"./Input.js";import{T as x}from"./Title.js";import{F as G}from"./FormLayout.js";import{E as I}from"./ErrorWrapper.js";const S=e.forwardRef((r,v)=>{const{className:C,mode:s=E.onwhite,variant:n=_.normal,error:m,name:o,htmlMarkup:d="fieldset"}=r,f=s===E.ondark,c=n===_.bigform,N=i(a["form-group-wrapper"],{[a["form-group-wrapper--on-dark"]]:f,[a["form-group-wrapper--invalid"]]:m},C),w=i(a["form-group-wrapper__title"],{[a["form-group-wrapper__title--on-dark"]]:f&&!m,[a["form-group-wrapper__title--bigform"]]:c}),F=i(a["form-group"]),u=i(a["field-set__legend"],{[a["field-set__legend--on-dark"]]:f&&!m,[a["field-set__legend--bigform"]]:c}),p=t=>{if(t.type===G)return e.cloneElement(t,{variant:n,mapHelper:p});if(t.type===g){let l=t.type===g;return e.cloneElement(t,{name:o!=null?o:l.valueOf.name,mode:s,variant:n,error:!!m})}else if(t.type===y){let l=t.type===y;return e.cloneElement(t,{name:o!=null?o:l.valueOf.name,mode:s,variant:n,error:!!m})}else if(t.type===k){let l=t.type===k;return e.cloneElement(t,{name:o!=null?o:l.valueOf.name,mode:s,variant:n,error:!!m})}return t};return e.createElement("div",{"data-testid":r.testId,"data-analyticsid":b.FormGroup,className:N,ref:v,tabIndex:-1},r.title&&e.createElement(x,{className:w,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},r.title),e.createElement(I,{errorText:m},e.createElement("div",{className:F},d==="div"&&e.createElement("div",{id:r.title,className:a["field-set"]},r.legend&&e.createElement("h5",{className:u},r.legend),e.Children.map(r.children,p)),d==="fieldset"&&e.createElement("fieldset",{name:r.title,className:a["field-set"]},r.legend&&e.createElement("legend",{className:u},r.legend),e.Children.map(r.children,p)))))});export{S as F};
+import e from"react";import i from"classnames";import o from"./components/FormGroup/styles.module.scss";import{C as g}from"./Checkbox.js";import{FormMode as E,FormVariant as y,AnalyticsId as x}from"./constants.js";import{R as _}from"./RadioButton.js";import{I as v}from"./Input.js";import{T as G}from"./Title.js";import{F as I}from"./FormLayout.js";import{E as O}from"./ErrorWrapper.js";import{S as k}from"./Select.js";const j=e.forwardRef((t,C)=>{const{className:N,mode:l=E.onwhite,variant:s=y.normal,error:m,name:a,htmlMarkup:u="fieldset"}=t,f=l===E.ondark,d=s===y.bigform,w=i(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:f,[o["form-group-wrapper--invalid"]]:m},N),F=i(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:f&&!m,[o["form-group-wrapper__title--bigform"]]:d}),b=i(o["form-group"]),c=i(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:f&&!m,[o["field-set__legend--bigform"]]:d}),p=r=>{if(r.type===I)return e.cloneElement(r,{variant:s,mapHelper:p});if(r.type===g){let n=r.type===g;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,variant:s,error:!!m})}else if(r.type===_){let n=r.type===_;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,variant:s,error:!!m})}else if(r.type===v){let n=r.type===v;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,variant:s,error:!!m})}else if(r.type===k){let n=r.type===k;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,error:!!m})}return r};return e.createElement("div",{"data-testid":t.testId,"data-analyticsid":x.FormGroup,className:w,ref:C,tabIndex:-1},t.title&&e.createElement(G,{className:F,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},t.title),e.createElement(O,{errorText:m},e.createElement("div",{className:b},u==="div"&&e.createElement("div",{id:t.title,className:o["field-set"]},t.legend&&e.createElement("h5",{className:c},t.legend),e.Children.map(t.children,p)),u==="fieldset"&&e.createElement("fieldset",{name:t.title,className:o["field-set"]},t.legend&&e.createElement("legend",{className:c},t.legend),e.Children.map(t.children,p)))))});export{j as F};
 //# sourceMappingURL=FormGroup.js.map

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { className, mode = FormMode.onwhite, variant = FormVariant.normal, error, name, htmlMarkup = 'fieldset' } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if ((child as React.ReactElement<FormLayoutProps>).type === FormLayout) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if ((child as React.ReactElement<CheckboxProps>).type === Checkbox) {\n      let checkbox = (child as React.ReactElement<CheckboxProps>).type === Checkbox;\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? checkbox.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<RadioButtonProps>).type === RadioButton) {\n      let radioButton = (child as React.ReactElement<RadioButtonProps>).type === RadioButton;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? radioButton.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<InputProps>).type === Input) {\n      let input = (child as React.ReactElement<InputProps>).type === Input;\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? input.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper errorText={error}>\n        <div className={formGroupClasses}>\n          {htmlMarkup === 'div' && (\n            <div id={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </div>\n          )}\n          {htmlMarkup === 'fieldset' && (\n            <fieldset name={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </fieldset>\n          )}\n        </div>\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","mapFormComponent","child","FormLayout","Checkbox","checkbox","RadioButton","radioButton","Input","input","AnalyticsId","Title","ErrorWrapper"],"mappings":"mYAsCO,MAAMA,EAAYC,EAAM,WAAW,CAACC,EAAuBC,IAA4C,CAC5G,KAAM,CAAE,UAAAC,EAAW,KAAAC,EAAOC,EAAS,QAAS,QAAAC,EAAUC,EAAY,OAAQ,MAAAC,EAAO,KAAAC,EAAM,WAAAC,EAAa,UAAA,EAAeT,EAC7GU,EAASP,IAASC,EAAS,OAC3BO,EAAUN,IAAYC,EAAY,QAClCM,EAA0BC,EAC9BC,EAAgB,sBAChB,CACE,CAACA,EAAgB,gCAAiCJ,EAClD,CAACI,EAAgB,gCAAiCP,CACpD,EACAL,CAAA,EAEIa,EAAeF,EAAWC,EAAgB,6BAA8B,CAC5E,CAACA,EAAgB,uCAAwCJ,GAAU,CAACH,EACpE,CAACO,EAAgB,uCAAwCH,CAAA,CAC1D,EACKK,EAAmBH,EAAWC,EAAgB,aAAa,EAE3DG,EAAgBJ,EAAWC,EAAgB,qBAAsB,CACrE,CAACA,EAAgB,+BAAgCJ,GAAU,CAACH,EAC5D,CAACO,EAAgB,+BAAgCH,CAAA,CAClD,EAEKO,EAAoBC,GAA4C,CAC/D,GAAAA,EAA8C,OAASC,EACnD,OAAArB,EAAM,aAAaoB,EAA8C,CACtE,QAAAd,EACA,UAAWa,CAAA,CACZ,EACH,GAAYC,EAA4C,OAASE,EAAU,CACrE,IAAAC,EAAYH,EAA4C,OAASE,EAC9D,OAAAtB,EAAM,aAAaoB,EAA4C,CACpE,KAAMX,GAAA,KAAAA,EAAQc,EAAS,QAAQ,KAC/B,KAAAnB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,CAAA,SACSY,EAA+C,OAASI,EAAa,CAC3E,IAAAC,EAAeL,EAA+C,OAASI,EACpE,OAAAxB,EAAM,aAAaoB,EAA+C,CACvE,KAAMX,GAAA,KAAAA,EAAQgB,EAAY,QAAQ,KAClC,KAAArB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,CAAA,SACSY,EAAyC,OAASM,EAAO,CAC/D,IAAAC,EAASP,EAAyC,OAASM,EACxD,OAAA1B,EAAM,aAAaoB,EAAyC,CACjE,KAAMX,GAAA,KAAAA,EAAQkB,EAAM,QAAQ,KAC5B,KAAAvB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,CACH,CACO,OAAAY,CAAA,EAGT,OACGpB,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,OAAQ,mBAAkB2B,EAAY,UAAW,UAAWf,EAAyB,IAAAX,EAAU,SAAU,EAC9H,EAAAD,EAAM,OACJD,EAAA,cAAA6B,EAAA,CAAM,UAAWb,EAAc,WAAY,KAAM,WAAY,SAAU,OAAQ,CAAE,UAAW,EAAG,aAAcR,EAAQ,EAAI,CAAE,CACzH,EAAAP,EAAM,KACT,EAEDD,EAAA,cAAA8B,EAAA,CAAa,UAAWtB,CAAA,EACtBR,EAAA,cAAA,MAAA,CAAI,UAAWiB,CACb,EAAAP,IAAe,OACbV,EAAA,cAAA,MAAA,CAAI,GAAIC,EAAM,MAAO,UAAWc,EAAgB,YAC9C,EAAAd,EAAM,QAAWD,EAAA,cAAA,KAAA,CAAG,UAAWkB,CAAA,EAAgBjB,EAAM,MAAO,EAC5DD,EAAM,SAAS,IAAIC,EAAM,SAAUkB,CAAgB,CACtD,EAEDT,IAAe,YACbV,EAAA,cAAA,WAAA,CAAS,KAAMC,EAAM,MAAO,UAAWc,EAAgB,YACrD,EAAAd,EAAM,QAAWD,EAAA,cAAA,SAAA,CAAO,UAAWkB,CAAA,EAAgBjB,EAAM,MAAO,EAChED,EAAM,SAAS,IAAIC,EAAM,SAAUkB,CAAgB,CACtD,CAEJ,CACF,CACF,CAEJ,CAAC"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Select, { SelectProps } from '../Select';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { className, mode = FormMode.onwhite, variant = FormVariant.normal, error, name, htmlMarkup = 'fieldset' } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if ((child as React.ReactElement<FormLayoutProps>).type === FormLayout) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if ((child as React.ReactElement<CheckboxProps>).type === Checkbox) {\n      let checkbox = (child as React.ReactElement<CheckboxProps>).type === Checkbox;\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? checkbox.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<RadioButtonProps>).type === RadioButton) {\n      let radioButton = (child as React.ReactElement<RadioButtonProps>).type === RadioButton;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? radioButton.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<InputProps>).type === Input) {\n      let input = (child as React.ReactElement<InputProps>).type === Input;\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? input.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<SelectProps>).type === Select) {\n      let select = (child as React.ReactElement<SelectProps>).type === Select;\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? select.valueOf.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper errorText={error}>\n        <div className={formGroupClasses}>\n          {htmlMarkup === 'div' && (\n            <div id={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </div>\n          )}\n          {htmlMarkup === 'fieldset' && (\n            <fieldset name={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </fieldset>\n          )}\n        </div>\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","mapFormComponent","child","FormLayout","Checkbox","checkbox","RadioButton","radioButton","Input","input","Select","select","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}

package/HelpBubble.js

@@ -1,2 +1,2 @@
-import w from"classnames";import s,{useRef as A,useState as j}from"react";import{AnalyticsId as Z}from"./constants.js";import{useInterval as q}from"./hooks/useInterval.js";import{useIsVisible as J}from"./hooks/useIsVisible.js";import{useLayoutEvent as K}from"./hooks/useLayoutEvent.js";import{useSize as Q}from"./hooks/useSize.js";import{A as Y}from"./AnchorLink.js";import{C as $}from"./Close.js";import r from"./components/HelpBubble/styles.module.scss";const z=373,b=12,g=16,N=20,S=4,I=12,k=(t,e,i)=>i!==l.positionautomatic?i:t.top>e.height+g?l.positionabove:l.positionbelow,y=t=>t.left+t.width/2,tt=t=>document.documentElement.clientWidth-t.right+t.width/2,p=(t,e)=>y(t)-e.width/2,et=(t,e)=>p(t,e)+e.width,ot=(t,e)=>p(t,e)>b,nt=(t,e)=>et(t,e)<document.documentElement.clientWidth-b,it=(t,e)=>nt(t,e)?ot(t,e)?"floating":"left":"right",P=(t,e)=>t.top-g-e.height,_=t=>t.bottom+g,rt=()=>document.documentElement.clientWidth-b*2,st=()=>document.documentElement.clientWidth>z+b*2,W=t=>t.top-g-S,lt=t=>y(t)-N/2,bt=t=>tt(t)-N/2,ct=(t,e,i)=>{const n=it(t,e),o=k(t,e,i);return n==="left"?o===l.positionabove?"leftabove":"leftbelow":n==="right"?o===l.positionabove?"rightabove":"rightbelow":o===l.positionabove?"floatingabove":"floatingbelow"},ut=(t,e,i)=>{const n=ct(t,e,i),o=st()?void 0:rt();return n==="leftabove"?{left:b,top:P(t,e),width:o}:n==="leftbelow"?{left:b,top:_(t),width:o}:n==="rightabove"?{right:b,top:P(t,e),width:o}:n==="rightbelow"?{right:b,top:_(t),width:o}:n==="floatingbelow"?{left:p(t,e),top:_(t),width:o}:{left:p(t,e),top:P(t,e),width:o}},at=(t,e,i)=>{const n=lt(e),o=bt(e),c=t.left+I,u=t.right+I;return t.right?i===l.positionabove?{right:o>u?o:u,top:W(e)}:{right:o>u?o:u,top:e.bottom}:i===l.positionabove?{left:n>c?n:c,top:W(e)}:{left:n>c?n:c,top:e.bottom}};var l=(t=>(t.positionautomatic="positionautomatic",t.positionbelow="positionbelow",t.positionabove="positionabove",t))(l||{});const xt=t=>{const{helpBubbleId:e,children:i,controllerRef:n,className:o="",variant:c="positionautomatic",showBubble:u,noCloseButton:v,linkText:f="Mer hjelp",linkUrl:x,onLinkClick:R,onClose:T,closeAriaLabel:O,testId:H}=t,B=A(null),F=A(null),h=Q(B),[a,X]=j(),C=J(n,0),L=()=>{var E;X((E=n.current)==null?void 0:E.getBoundingClientRect())};if(q(L,500),K(L,["scroll","resize"],10),!u)return null;const V=w(r.helpbubble,C&&r["helpbubble--visible"],o),m=a&&h&&k(a,h,c),D=w(r.helpbubble__arrow,{[r["helpbubble__arrow--visible"]]:C,[r["helpbubble__arrow--over"]]:m==="positionbelow",[r["helpbubble__arrow--under"]]:m==="positionabove"}),M=w(r.helpbubble__content,{[r["helpbubble__content--close"]]:!v}),d=a&&h&&ut(a,h,c),U=d&&a&&m&&at(d,a,m),G=()=>{if(R&&f)return s.createElement("button",{className:r.helpbubble__link,onClick:R,type:"button"},f);if(x&&f)return s.createElement(Y,{href:x},f)};return s.createElement(s.Fragment,null,s.createElement("div",{id:e,ref:B,className:V,style:d,"data-testid":H,"data-analyticsid":Z.HelpBubble,role:"tooltip"},s.createElement("div",{className:M},i,G()),!v&&s.createElement("div",{className:r.helpbubble__close},s.createElement($,{small:!0,onClick:T,ariaLabel:O}))),s.createElement("div",{ref:F,className:D,style:U}))};export{xt as H,l as a};
+import _ from"classnames";import s,{useRef as I,useState as J,useEffect as K}from"react";import{AnalyticsId as Q}from"./constants.js";import{useInterval as Y}from"./hooks/useInterval.js";import{useIsVisible as $}from"./hooks/useIsVisible.js";import{useLayoutEvent as z}from"./hooks/useLayoutEvent.js";import{useSize as S}from"./hooks/useSize.js";import{A as tt}from"./AnchorLink.js";import{C as et}from"./Close.js";import l from"./components/HelpBubble/styles.module.scss";const ot=373,c=12,d=16,T=20,nt=4,W=12,k=(t,e,i)=>i!==b.positionautomatic?i:t.top>e.height+d?b.positionabove:b.positionbelow,y=t=>t.left+t.width/2,it=t=>document.documentElement.clientWidth-t.right+t.width/2,g=(t,e)=>y(t)-e.width/2,rt=(t,e)=>g(t,e)+e.width,st=(t,e)=>g(t,e)>c,lt=(t,e)=>rt(t,e)<document.documentElement.clientWidth-c,bt=(t,e)=>lt(t,e)?st(t,e)?"floating":"left":"right",v=(t,e)=>t.top-d-e.height,x=t=>t.bottom+d,ct=()=>document.documentElement.clientWidth-c*2,ut=()=>document.documentElement.clientWidth>ot+c*2,N=t=>t.top-d-nt,at=t=>y(t)-T/2,ft=t=>it(t)-T/2,ht=(t,e,i)=>{const n=bt(t,e),o=k(t,e,i);return n==="left"?o===b.positionabove?"leftabove":"leftbelow":n==="right"?o===b.positionabove?"rightabove":"rightbelow":o===b.positionabove?"floatingabove":"floatingbelow"},mt=(t,e,i)=>{const n=ht(t,e,i),o=ut()?void 0:ct();return n==="leftabove"?{left:c,top:v(t,e),width:o}:n==="leftbelow"?{left:c,top:x(t),width:o}:n==="rightabove"?{right:c,top:v(t,e),width:o}:n==="rightbelow"?{right:c,top:x(t),width:o}:n==="floatingbelow"?{left:g(t,e),top:x(t),width:o}:{left:g(t,e),top:v(t,e),width:o}},pt=(t,e,i)=>{const n=at(e),o=ft(e),u=t.left+W,r=t.right+W;return t.right?i===b.positionabove?{right:o>r?o:r,top:N(e)}:{right:o>r?o:r,top:e.bottom}:i===b.positionabove?{left:n>u?n:u,top:N(e)}:{left:n>u?n:u,top:e.bottom}};var b=(t=>(t.positionautomatic="positionautomatic",t.positionbelow="positionbelow",t.positionabove="positionabove",t))(b||{});const Et=t=>{const{helpBubbleId:e,children:i,controllerRef:n,className:o="",variant:u="positionautomatic",showBubble:r,noCloseButton:R,linkText:h="Mer hjelp",linkUrl:B,onLinkClick:C,onClose:O,closeAriaLabel:H,role:E,testId:F}=t,L=I(null),X=I(null),m=S(L),[a,V]=J(),D=$(n,0),w=()=>{var A;V((A=n.current)==null?void 0:A.getBoundingClientRect())};Y(w,500),z(w,["scroll","resize"],10),K(()=>{r&&w()},[r]);const f=E==="tooltip";if(!r&&!f)return null;const M=_(l.helpbubble,{[l["helpbubble--visible"]]:!f&&D||f&&r},o),p=a&&m&&k(a,m,u),U=_(l.helpbubble__arrow,{[l["helpbubble__arrow--over"]]:p==="positionbelow",[l["helpbubble__arrow--under"]]:p==="positionabove"}),G=_(l.helpbubble__content,{[l["helpbubble__content--close"]]:!R&&!f}),P=a&&m&&mt(a,m,u),j=P&&a&&p&&pt(P,a,p),Z=()=>{if(!f){if(C&&h)return s.createElement("button",{className:l.helpbubble__link,onClick:C,type:"button"},h);if(B&&h)return s.createElement(tt,{href:B},h)}},q=()=>{if(!(R||f))return s.createElement("div",{className:l.helpbubble__close},s.createElement(et,{small:!0,onClick:O,ariaLabel:H}))};return s.createElement(s.Fragment,null,s.createElement("div",{id:e,ref:L,className:M,style:P,"data-testid":F,"data-analyticsid":Q.HelpBubble,role:E},q(),s.createElement("div",{className:G},i,Z())),s.createElement("div",{ref:X,className:U,style:j}))};export{Et as H,b as a};
 //# sourceMappingURL=HelpBubble.js.map

package/HelpBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/utils.ts","../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { HelpBubbleVariant } from './HelpBubble';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof HelpBubbleVariant\n): keyof typeof HelpBubbleVariant => {\n  if (variant !== HelpBubbleVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return HelpBubbleVariant.positionabove;\n  } else {\n    return HelpBubbleVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof HelpBubbleVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport AnchorLink from '../AnchorLink';\nimport Close from '../Close';\n\nimport styles from './styles.module.scss';\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\n\nexport enum HelpBubbleVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble */\n  noCloseButton?: boolean;\n  /** Visible text on the link */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble: React.FC<HelpBubbleProps> = props => {\n  const {\n    helpBubbleId,\n    children,\n    controllerRef,\n    className = '',\n    variant = HelpBubbleVariant.positionautomatic,\n    showBubble,\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    testId,\n  } = props;\n\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  if (!showBubble) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, controllerisVisible && styles['helpbubble--visible'], className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.helpbubble__arrow, {\n    [styles['helpbubble__arrow--visible']]: controllerisVisible,\n    [styles['helpbubble__arrow--over']]: verticalPosition === HelpBubbleVariant.positionbelow,\n    [styles['helpbubble__arrow--under']]: verticalPosition === HelpBubbleVariant.positionabove,\n  });\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  const renderLink = (): JSX.Element | undefined => {\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return <AnchorLink href={linkUrl}>{linkText}</AnchorLink>;\n    }\n  };\n\n  return (\n    <>\n      <div\n        id={helpBubbleId}\n        ref={bubbleRef}\n        className={helpBubbleClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpBubble}\n        role={'tooltip'}\n      >\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n        {!noCloseButton && (\n          <div className={styles.helpbubble__close}>\n            <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n          </div>\n        )}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n};\n\nexport default HelpBubble;\n"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","variant","HelpBubbleVariant","getControllerLeftCenterPx","getControllerRightCenterPx","getBubbleLeftPx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx","HelpBubble","props","helpBubbleId","children","controllerRef","className","showBubble","noCloseButton","linkText","linkUrl","onLinkClick","onClose","closeAriaLabel","testId","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","helpBubbleClasses","classNames","styles","arrowClasses","contentClasses","arrowStyle","renderLink","React","AnchorLink","AnalyticsId","Close"],"mappings":"wcAOA,MAAMA,EAAkB,IAElBC,EAAmB,GAEnBC,EAA4B,GAE5BC,EAAiB,GAEjBC,EAA2B,EAE3BC,EAA6B,GAStBC,EAAsB,CACjCC,EACAC,EACAC,IAEIA,IAAYC,EAAkB,kBACzBD,EAELF,EAAe,IAAMC,EAAW,OAASN,EACpCQ,EAAkB,cAElBA,EAAkB,cASvBC,EAA6BJ,GAAoCA,EAAe,KAAOA,EAAe,MAAQ,EAO9GK,GAA8BL,GAClC,SAAS,gBAAgB,YAAcA,EAAe,MAAQA,EAAe,MAAQ,EAQjFM,EAAkB,CAACN,EAAyBC,IACXG,EAA0BJ,CAAc,EAEvCC,EAAW,MAAQ,EASrDM,GAAmB,CAACP,EAAyBC,IAC5BK,EAAgBN,EAAgBC,CAAU,EAEzCA,EAAW,MAS7BO,GAAuB,CAACR,EAAyBC,IAChCK,EAAgBN,EAAgBC,CAAU,EAEzCP,EASlBe,GAA0B,CAACT,EAAyBC,IAClCM,GAAiBP,EAAgBC,CAAU,EAE1C,SAAS,gBAAgB,YAAcP,EAS1DgB,GAAwB,CAACV,EAAyBC,IACjDQ,GAAwBT,EAAgBC,CAAU,EAGlDO,GAAqBR,EAAgBC,CAAU,EAI7C,WAHE,OAHA,QAeLU,EAAmB,CAACX,EAAyBC,IACjDD,EAAe,IAAML,EAA4BM,EAAW,OAQxDW,EAAoBZ,GAAoCA,EAAe,OAASL,EAMhFkB,GAAiB,IAAc,SAAS,gBAAgB,YAAcnB,EAAmB,EAMzFoB,GAAwB,IACrB,SAAS,gBAAgB,YAAcrB,EAAkBC,EAAmB,EAQ/EqB,EAAkBf,GAAoCA,EAAe,IAAML,EAA4BE,EAOvGmB,GAAkBhB,GAAoCI,EAA0BJ,CAAc,EAAIJ,EAAiB,EAOnHqB,GAAmBjB,GAAoCK,GAA2BL,CAAc,EAAIJ,EAAiB,EASrHsB,GAAoB,CAAClB,EAAyBC,EAAqBC,IAA4D,CAC7H,MAAAiB,EAAqBT,GAAsBV,EAAgBC,CAAU,EACrEmB,EAAmBrB,EAAoBC,EAAgBC,EAAYC,CAAO,EAEhF,OAAIiB,IAAuB,OACrBC,IAAqBjB,EAAkB,cAClC,YAEF,YAGLgB,IAAuB,QACrBC,IAAqBjB,EAAkB,cAClC,aAEF,aAGLiB,IAAqBjB,EAAkB,cAClC,gBAGF,eACT,EASakB,GAAiB,CAACrB,EAAyBC,EAAqBC,IAA2D,CACtI,MAAMoB,EAAiBJ,GAAkBlB,EAAgBC,EAAYC,CAAO,EACtEqB,EAAeT,GAAsB,EAAuB,OAAnBD,GAAmB,EAElE,OAAIS,IAAmB,YACd,CACL,KAAM5B,EACN,IAAKiB,EAAiBX,EAAgBC,CAAU,EAChD,MAAOsB,CAAA,EAGPD,IAAmB,YACd,CAAE,KAAM5B,EAAkB,IAAKkB,EAAiBZ,CAAc,EAAG,MAAOuB,GAE7ED,IAAmB,aACd,CAAE,MAAO5B,EAAkB,IAAKiB,EAAiBX,EAAgBC,CAAU,EAAG,MAAOsB,GAE1FD,IAAmB,aACd,CAAE,MAAO5B,EAAkB,IAAKkB,EAAiBZ,CAAc,EAAG,MAAOuB,GAG9ED,IAAmB,gBACd,CAAE,KAAMhB,EAAgBN,EAAgBC,CAAU,EAAG,IAAKW,EAAiBZ,CAAc,EAAG,MAAOuB,CAAY,EAGjH,CAAE,KAAMjB,EAAgBN,EAAgBC,CAAU,EAAG,IAAKU,EAAiBX,EAAgBC,CAAU,EAAG,MAAOsB,CAAY,CACpI,EASaC,GAAgB,CAC3BC,EACAzB,EACAoB,IACkB,CACZ,MAAAM,EAASV,GAAehB,CAAc,EACtC2B,EAAUV,GAAgBjB,CAAc,EACxC4B,EAAaH,EAAY,KAAkB3B,EAC3C+B,EAAcJ,EAAY,MAAmB3B,EAEnD,OAAI2B,EAAY,MACVL,IAAqBjB,EAAkB,cAClC,CACL,MAAOwB,EAAUE,EAAaF,EAAUE,EACxC,IAAKd,EAAef,CAAc,CAAA,EAI/B,CACL,MAAO2B,EAAUE,EAAaF,EAAUE,EACxC,IAAK7B,EAAe,MAAA,EAIpBoB,IAAqBjB,EAAkB,cAClC,CACL,KAAMuB,EAASE,EAAYF,EAASE,EACpC,IAAKb,EAAef,CAAc,CAAA,EAI/B,CACL,KAAM0B,EAASE,EAAYF,EAASE,EACpC,IAAK5B,EAAe,MAAA,CAExB,EC5QY,IAAAG,GAAAA,IACVA,EAAA,kBAAoB,oBACpBA,EAAA,cAAgB,gBAChBA,EAAA,cAAgB,gBAHNA,IAAAA,GAAA,CAAA,CAAA,EAmCZ,MAAM2B,GAAiDC,GAAA,CAC/C,KAAA,CACJ,aAAAC,EACA,SAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,QAAAjC,EAAU,oBACV,WAAAkC,EACA,cAAAC,EACA,SAAAC,EAAW,YACX,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,eAAAC,EACA,OAAAC,CACE,EAAAZ,EAEEa,EAAYC,EAAuB,IAAI,EACvCC,EAAWD,EAAuB,IAAI,EACtC5C,EAAa8C,EAAQH,CAAS,EAC9B,CAAC5C,EAAgBgD,CAAiB,EAAIC,EAAkB,EACxDC,EAAsBC,EAAajB,EAAe,CAAC,EAEnDkB,EAAuB,IAAY,OACrBJ,GAAAK,EAAAnB,EAAc,UAAd,YAAAmB,EAAuB,uBAAuB,CAAA,EAMlE,GAHAC,EAAYF,EAAsB,GAAG,EACrCG,EAAeH,EAAsB,CAAC,SAAU,QAAQ,EAAG,EAAE,EAEzD,CAAChB,EACI,OAAA,KAGT,MAAMoB,EAAoBC,EAAWC,EAAO,WAAYR,GAAuBQ,EAAO,uBAAwBvB,CAAS,EACjHf,EAAmBpB,GAAkBC,GAAcF,EAAoBC,EAAgBC,EAAYC,CAAO,EAC1GyD,EAAeF,EAAWC,EAAO,kBAAmB,CACxD,CAACA,EAAO,+BAAgCR,EACxC,CAACQ,EAAO,4BAA6BtC,IAAqB,gBAC1D,CAACsC,EAAO,6BAA8BtC,IAAqB,eAAA,CAC5D,EACKwC,EAAiBH,EAAWC,EAAO,oBAAqB,CAC5D,CAACA,EAAO,+BAAgC,CAACrB,CAAA,CAC1C,EAEKZ,EAAczB,GAAkBC,GAAcoB,GAAerB,EAAgBC,EAAYC,CAAO,EAChG2D,EAAapC,GAAezB,GAAkBoB,GAAoBI,GAAcC,EAAazB,EAAgBoB,CAAgB,EAE7H0C,EAAa,IAA+B,CAChD,GAAItB,GAAeF,EACjB,OACGyB,EAAA,cAAA,SAAA,CAAO,UAAWL,EAAO,iBAAkB,QAASlB,EAAa,KAAK,QAAA,EACpEF,CACH,EAEJ,GAAWC,GAAWD,EACpB,OAAQyB,EAAA,cAAAC,EAAA,CAAW,KAAMzB,CAAA,EAAUD,CAAS,CAC9C,EAGF,uCAEKyB,EAAA,cAAA,MAAA,CACC,GAAI/B,EACJ,IAAKY,EACL,UAAWY,EACX,MAAO/B,EACP,cAAakB,EACb,mBAAkBsB,EAAY,WAC9B,KAAM,SAAA,EAELF,EAAA,cAAA,MAAA,CAAI,UAAWH,CAAA,EACb3B,EACA6B,GACH,EACC,CAACzB,GACC0B,EAAA,cAAA,MAAA,CAAI,UAAWL,EAAO,iBAAA,EACpBK,EAAA,cAAAG,EAAA,CAAM,MAAK,GAAC,QAASzB,EAAS,UAAWC,CAAgB,CAAA,CAC5D,CAEJ,EACCqB,EAAA,cAAA,MAAA,CAAI,IAAKjB,EAAU,UAAWa,EAAc,MAAOE,CAAY,CAAA,CAClE,CAEJ"}
+{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/utils.ts","../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { HelpBubbleVariant } from './HelpBubble';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof HelpBubbleVariant\n): keyof typeof HelpBubbleVariant => {\n  if (variant !== HelpBubbleVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return HelpBubbleVariant.positionabove;\n  } else {\n    return HelpBubbleVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof HelpBubbleVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport AnchorLink from '../AnchorLink';\nimport Close from '../Close';\n\nimport styles from './styles.module.scss';\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\n\nexport enum HelpBubbleVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble: React.FC<HelpBubbleProps> = props => {\n  const {\n    helpBubbleId,\n    children,\n    controllerRef,\n    className = '',\n    variant = HelpBubbleVariant.positionautomatic,\n    showBubble,\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    role,\n    testId,\n  } = props;\n\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    if (showBubble) {\n      updateControllerSize();\n    }\n  }, [showBubble]);\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(\n    styles.helpbubble,\n    { [styles['helpbubble--visible']]: (!isTooltip && controllerisVisible) || (isTooltip && showBubble) },\n    className\n  );\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.helpbubble__arrow, {\n    [styles['helpbubble__arrow--over']]: verticalPosition === HelpBubbleVariant.positionbelow,\n    [styles['helpbubble__arrow--under']]: verticalPosition === HelpBubbleVariant.positionabove,\n  });\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton && !isTooltip,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  const renderLink = (): JSX.Element | undefined => {\n    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return <AnchorLink href={linkUrl}>{linkText}</AnchorLink>;\n    }\n  };\n\n  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <>\n      <div\n        id={helpBubbleId}\n        ref={bubbleRef}\n        className={helpBubbleClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpBubble}\n        role={role}\n      >\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n};\n\nexport default HelpBubble;\n"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","variant","HelpBubbleVariant","getControllerLeftCenterPx","getControllerRightCenterPx","getBubbleLeftPx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx","HelpBubble","props","helpBubbleId","children","controllerRef","className","showBubble","noCloseButton","linkText","linkUrl","onLinkClick","onClose","closeAriaLabel","role","testId","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","helpBubbleClasses","classNames","styles","arrowClasses","contentClasses","arrowStyle","renderLink","React","AnchorLink","renderCloseButton","Close","AnalyticsId"],"mappings":"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"}

package/Input.js

@@ -1,2 +1,2 @@
-import t,{useRef as j}from"react";import p from"classnames";import{FormMode as s,FormVariant as J,IconSize as g,AnalyticsId as K}from"./constants.js";import{a as Q}from"./uuid.js";import{Icon as U}from"./components/Icons/Icon.js";import{getColor as R}from"./theme/currys/color.js";import{useBreakpoint as Y,Breakpoint as Z}from"./hooks/useBreakpoint.js";import{E as T}from"./ErrorWrapper.js";import e from"./components/Input/styles.module.scss";var ee=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r))(ee||{});const re=12,te=(r,o,d)=>{const m=o?"1.5rem":"2rem",u=o?`${d}px`:"0px",l="4px";return`calc(${r*re}px + ${m} + ${u} + ${l})`},ue=t.forwardRef((r,o)=>{const{defaultValue:d,placeholder:m,type:u="text",inputId:l=Q(),name:A,transparent:N=!1,icon:n,iconRight:b,mode:i,variant:I,label:h,error:$,errorText:_,testId:F,disabled:a,readOnly:S,autoComplete:y,afterLabelChildren:C,belowLabelChildren:E,width:v,required:z}=r,B=Y(),c=j(null),x=i===s.ondark,V=i===s.onblueberry,f=i===s.oninvalid||_||$,w=I===J.bigform,D=N&&i!==s.ondark&&!f,H=p(e["input-wrapper"]),L=p(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:x,[e["input-wrapper__label-wrapper--disabled"]]:a}),M=p(e["content-wrapper"],{[e["content-wrapper--transparent"]]:D,[e["content-wrapper--on-blueberry"]]:V,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:f,[e["content-wrapper--bigform"]]:w,[e["content-wrapper--disabled"]]:a,[e["content-wrapper--with-icon"]]:n}),X=p(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:w,[e["content-wrapper__input--disabled"]]:a}),q=a?R("neutral",500):R("black"),k=B===Z.xs||!w?g.XSmall:g.Small,W=()=>n!==void 0?t.createElement(U,{color:q,size:k,svgIcon:n}):null,G=()=>{if(c&&c.current&&n){const P=b?0:1;c.current.children[P].focus()}},O=v?te(v,!!n,k):void 0;return t.createElement(T,{errorText:_},t.createElement("div",{"data-testid":F,"data-analyticsid":K.Input,className:H},h&&t.createElement("div",{className:L},t.createElement("label",{htmlFor:l},h),C&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},C)),E&&t.createElement("div",null,E),t.createElement("div",{onClick:G,ref:c,className:M,style:{maxWidth:O}},!b&&W(),t.createElement("input",{name:A,type:u,defaultValue:d,id:l,className:X,ref:o,"aria-invalid":!!f,disabled:a,placeholder:m,readOnly:S,autoComplete:y||"off",required:z}),b&&W())))});export{re as A,ue as I,ee as a};
+import t,{useRef as j}from"react";import c from"classnames";import{FormMode as s,FormVariant as J,IconSize as g,AnalyticsId as K,AVERAGE_CHARACTER_WIDTH_PX as Q}from"./constants.js";import{a as U}from"./uuid.js";import{Icon as Y}from"./components/Icons/Icon.js";import{getColor as R}from"./theme/currys/color.js";import{useBreakpoint as Z,Breakpoint as T}from"./hooks/useBreakpoint.js";import{E as ee}from"./ErrorWrapper.js";import e from"./components/Input/styles.module.scss";var re=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r))(re||{});const te=(r,o,d)=>{const m=o?"1.5rem":"2rem",u=o?`${d}px`:"0px",l="4px";return`calc(${r*Q}px + ${m} + ${u} + ${l})`},ue=t.forwardRef((r,o)=>{const{defaultValue:d,placeholder:m,type:u="text",inputId:l=U(),name:N,transparent:A=!1,icon:n,iconRight:b,mode:i,variant:I,label:h,error:$,errorText:_,testId:F,disabled:a,readOnly:S,autoComplete:y,afterLabelChildren:C,belowLabelChildren:E,width:v,required:z}=r,B=Z(),p=j(null),x=i===s.ondark,V=i===s.onblueberry,f=i===s.oninvalid||_||$,w=I===J.bigform,D=A&&i!==s.ondark&&!f,H=c(e["input-wrapper"]),L=c(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:x,[e["input-wrapper__label-wrapper--disabled"]]:a}),M=c(e["content-wrapper"],{[e["content-wrapper--transparent"]]:D,[e["content-wrapper--on-blueberry"]]:V,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:f,[e["content-wrapper--bigform"]]:w,[e["content-wrapper--disabled"]]:a,[e["content-wrapper--with-icon"]]:n}),X=c(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:w,[e["content-wrapper__input--disabled"]]:a}),q=a?R("neutral",500):R("black"),k=B===T.xs||!w?g.XSmall:g.Small,W=()=>n!==void 0?t.createElement(Y,{color:q,size:k,svgIcon:n}):null,G=()=>{if(p&&p.current&&n){const P=b?0:1;p.current.children[P].focus()}},O=v?te(v,!!n,k):void 0;return t.createElement(ee,{errorText:_},t.createElement("div",{"data-testid":F,"data-analyticsid":K.Input,className:H},h&&t.createElement("div",{className:L},t.createElement("label",{htmlFor:l},h),C&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},C)),E&&t.createElement("div",null,E),t.createElement("div",{onClick:G,ref:p,className:M,style:{maxWidth:O}},!b&&W(),t.createElement("input",{name:N,type:u,defaultValue:d,id:l,className:X,ref:o,"aria-invalid":!!f,disabled:a,placeholder:m,readOnly:S,autoComplete:y||"off",required:z}),b&&W())))});export{ue as I,re as a};
 //# sourceMappingURL=Input.js.map

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required'\n  > {\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: string;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    belowLabelChildren,\n    width,\n    required,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onError = mode === FormMode.oninvalid || errorText || error;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper']);\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={inputId}>{label}</label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n          />\n          {iconRight && renderIcon()}\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Input;\n"],"names":["InputTypes","AVERAGE_CHARACTER_WIDTH_PX","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","Input","React","props","ref","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","belowLabelChildren","width","required","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required'\n  > {\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: string;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    belowLabelChildren,\n    width,\n    required,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onError = mode === FormMode.oninvalid || errorText || error;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper']);\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={inputId}>{label}</label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n          />\n          {iconRight && renderIcon()}\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","belowLabelChildren","width","required","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}

package/Panel.js

@@ -1,2 +1,2 @@
-import t,{useState as se,useEffect as z}from"react";import o from"classnames";import e from"./components/Panel/styles.module.scss";import{T as ie}from"./Title.js";import{B as D}from"./Button.js";import{AnalyticsId as ce,IconSize as x}from"./constants.js";import{Icon as d}from"./components/Icons/Icon.js";import me from"./components/Icons/ChevronDown.js";import pe from"./components/Icons/ChevronUp.js";import ue from"./components/Icons/ArrowRight.js";import de from"./components/Icons/AlertSignFill.js";import{palette as $}from"./theme/palette.js";import fe from"./components/Icons/Pencil.js";import ye from"./components/Icons/Calendar.js";import _e from"./components/Icons/Watch.js";import{useBreakpoint as be,Breakpoint as j}from"./hooks/useBreakpoint.js";import{useUuid as W}from"./hooks/useUuid.js";import{usePrevious as Ee}from"./hooks/usePrevious.js";import{g as ge}from"./accessibility.js";import{B as ve}from"./Badge.js";var he=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(he||{}),Ce=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(Ce||{}),we=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(we||{});const Ne=({status:a,statusMessage:s})=>{const g=()=>a==="error"?{color:$.cherry500,svgIcon:de}:{color:$.black,svgIcon:fe},i=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&s?t.createElement("div",{className:i,"data-testid":"display-status"},t.createElement(d,{...g(),size:x.XSmall})," ",t.createElement("span",null,s)):null},X=({date:a,time:s})=>a||s?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(d,{svgIcon:ye,size:x.XSmall}),t.createElement("span",null,a)),s&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(d,{svgIcon:_e,size:x.XSmall}),t.createElement("span",null,s))):null,qe=t.forwardRef(function(s,g){const{children:i,contentA:F,contentB:r,className:H,testId:U,title:v,titleHtmlMarkup:L="h2",url:f,target:O="_self",icon:c,iconRight:B=!1,variant:m="fill",status:p="normal",statusMessage:h,buttonText:A="Se detaljer",buttonTextClose:q="Skjul detaljer",buttonAriaLabelledById:S,buttonAriaLabel:G,layout:n="layout2",containerAsButton:C=!1,date:w,time:N,noTopBorder:J,buttonOnClick:u,buttonHtmlMarkup:K="a",expanded:y=!1,onExpand:_,renderChildrenWhenClosed:Q=!1}=s,[l,T]=se(y),Y=Ee(l),I=W(),b=W(),R=be();z(()=>{y!==l&&T(y)},[y]),z(()=>{_&&l!==!!Y&&_(l)},[l,_]);const E=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Z=o(e["panel-wrapper"],H),P=o(e.panel,{[e["panel--fill"]]:m==="fill",[e["panel--stroke"]]:m==="stroke",[e["panel--white"]]:m==="white",[e["panel--line"]]:m==="line",[e["panel--no-top-border"]]:m==="line"&&J,[e["panel--selected"]]:l,[e["panel--new"]]:p==="new",[e["panel--draft"]]:p==="draft",[e["panel--error"]]:p==="error",[e["panel--status"]]:p&&p!=="normal",[e["panel--with-icon"]]:c,[e["panel--button"]]:C,[e["panel--clickable"]]:i||f||_||u||C}),V=o({[e.panel__container]:n==="layout2"&&r,[e["panel__container--layout3"]]:E&&r,[e["panel__container--grow"]]:c}),ee=o({[e["panel-content-a"]]:n==="layout2",[e["panel-content-a--layout3a"]]:n==="layout3a",[e["panel-content-a--layout3b"]]:n==="layout3b",[e["panel-content-a--layout3c"]]:n==="layout3c"}),te=o({[e["panel__content-right--layout1"]]:r&&n==="layout1",[e["panel__content-right--layout2"]]:r&&n==="layout2",[e["panel__content-right--layout3"]]:r&&E,[e["panel__content-right--layout3a"]]:r&&n==="layout3a",[e["panel__content-right--layout3b"]]:r&&n==="layout3b",[e["panel__content-right--layout3c"]]:r&&n==="layout3c"}),ae=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout3"]]:E}),ne=o(e["panel__details-btn"]),le=()=>{const k=ge({label:G,id:S&&`${b} ${S}`||v&&I&&`${b} ${I}`}),M={onClick:u||(()=>T(!l)),className:C?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...k};return i?t.createElement(D,{testId:"expand","aria-expanded":l,...M},t.createElement("span",{id:b},l?q:A),t.createElement(d,{svgIcon:l?pe:me})):t.createElement(D,{testId:"url",htmlMarkup:K,href:f,target:O,...M},t.createElement("span",{id:b},A),t.createElement(d,{svgIcon:ue}))},re=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:E,[e["panel__btn-container--padding-top"]]:r}),oe=()=>{if(!i||!Q&&!l)return null;const k=o(e["panel-details"],{[e["panel-details--open"]]:l,[e["panel-details--line"]]:m==="line",[e["panel-details--white"]]:m==="white",[e["panel-details--with-icon"]]:c});return t.createElement("div",{className:k,"data-testid":"panel-details"},t.createElement("div",null,i))};return t.createElement("div",{ref:g,"data-testid":U,className:Z,"data-analyticsid":ce.Panel},t.createElement("div",{className:P},c&&!B&&t.createElement("div",{className:e.panel__icon},c),t.createElement("div",{className:V},t.createElement("div",{className:ee},t.createElement(Ne,{status:p,statusMessage:h}),v&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(ie,{appearance:"title3",htmlMarkup:L,id:I},v),h&&p==="new"&&t.createElement(ve,{color:"blueberry",testId:"badge-status",className:e.panel__badge},h)),F,R>=j.lg&&t.createElement(X,{date:w,time:N})),t.createElement("div",{className:te},r&&t.createElement("div",{className:ae},r),(i||f||w||N||u)&&t.createElement("div",{className:re},R<j.lg&&t.createElement(X,{date:w,time:N}),(i||f||u)&&t.createElement("div",{className:ne},le())))),c&&B&&t.createElement("div",{className:e["panel__icon--right"]},c)),oe())});export{qe as P,he as a,Ce as b,we as c};
+import t,{useState as se,useEffect as z}from"react";import o from"classnames";import e from"./components/Panel/styles.module.scss";import{T as ie}from"./Title.js";import{B as D}from"./Button.js";import{AnalyticsId as ce,IconSize as x}from"./constants.js";import{Icon as d}from"./components/Icons/Icon.js";import me from"./components/Icons/ChevronDown.js";import pe from"./components/Icons/ChevronUp.js";import ue from"./components/Icons/ArrowRight.js";import de from"./components/Icons/AlertSignFill.js";import{palette as $}from"./theme/palette.js";import fe from"./components/Icons/Pencil.js";import ye from"./components/Icons/Calendar.js";import _e from"./components/Icons/Watch.js";import{useBreakpoint as be,Breakpoint as j}from"./hooks/useBreakpoint.js";import{useUuid as W}from"./hooks/useUuid.js";import{usePrevious as Ee}from"./hooks/usePrevious.js";import{getAriaLabelAttributes as ve}from"./utils/accessibility.js";import{B as ge}from"./Badge.js";var he=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(he||{}),Ce=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(Ce||{}),we=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(we||{});const Ne=({status:a,statusMessage:s})=>{const v=()=>a==="error"?{color:$.cherry500,svgIcon:de}:{color:$.black,svgIcon:fe},i=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&s?t.createElement("div",{className:i,"data-testid":"display-status"},t.createElement(d,{...v(),size:x.XSmall})," ",t.createElement("span",null,s)):null},X=({date:a,time:s})=>a||s?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(d,{svgIcon:ye,size:x.XSmall}),t.createElement("span",null,a)),s&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(d,{svgIcon:_e,size:x.XSmall}),t.createElement("span",null,s))):null,qe=t.forwardRef(function(s,v){const{children:i,contentA:F,contentB:r,className:H,testId:U,title:g,titleHtmlMarkup:L="h2",url:f,target:O="_self",icon:c,iconRight:B=!1,variant:m="fill",status:p="normal",statusMessage:h,buttonText:A="Se detaljer",buttonTextClose:q="Skjul detaljer",buttonAriaLabelledById:S,buttonAriaLabel:G,layout:n="layout2",containerAsButton:C=!1,date:w,time:N,noTopBorder:J,buttonOnClick:u,buttonHtmlMarkup:K="a",expanded:y=!1,onExpand:_,renderChildrenWhenClosed:Q=!1}=s,[l,T]=se(y),Y=Ee(l),I=W(),b=W(),R=be();z(()=>{y!==l&&T(y)},[y]),z(()=>{_&&l!==!!Y&&_(l)},[l,_]);const E=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Z=o(e["panel-wrapper"],H),P=o(e.panel,{[e["panel--fill"]]:m==="fill",[e["panel--stroke"]]:m==="stroke",[e["panel--white"]]:m==="white",[e["panel--line"]]:m==="line",[e["panel--no-top-border"]]:m==="line"&&J,[e["panel--selected"]]:l,[e["panel--new"]]:p==="new",[e["panel--draft"]]:p==="draft",[e["panel--error"]]:p==="error",[e["panel--status"]]:p&&p!=="normal",[e["panel--with-icon"]]:c,[e["panel--button"]]:C,[e["panel--clickable"]]:i||f||_||u||C}),V=o({[e.panel__container]:n==="layout2"&&r,[e["panel__container--layout3"]]:E&&r,[e["panel__container--grow"]]:c}),ee=o({[e["panel-content-a"]]:n==="layout2",[e["panel-content-a--layout3a"]]:n==="layout3a",[e["panel-content-a--layout3b"]]:n==="layout3b",[e["panel-content-a--layout3c"]]:n==="layout3c"}),te=o({[e["panel__content-right--layout1"]]:r&&n==="layout1",[e["panel__content-right--layout2"]]:r&&n==="layout2",[e["panel__content-right--layout3"]]:r&&E,[e["panel__content-right--layout3a"]]:r&&n==="layout3a",[e["panel__content-right--layout3b"]]:r&&n==="layout3b",[e["panel__content-right--layout3c"]]:r&&n==="layout3c"}),ae=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout3"]]:E}),ne=o(e["panel__details-btn"]),le=()=>{const k=ve({label:G,id:S&&`${b} ${S}`||g&&I&&`${b} ${I}`}),M={onClick:u||(()=>T(!l)),className:C?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...k};return i?t.createElement(D,{testId:"expand","aria-expanded":l,...M},t.createElement("span",{id:b},l?q:A),t.createElement(d,{svgIcon:l?pe:me})):t.createElement(D,{testId:"url",htmlMarkup:K,href:f,target:O,...M},t.createElement("span",{id:b},A),t.createElement(d,{svgIcon:ue}))},re=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:E,[e["panel__btn-container--padding-top"]]:r}),oe=()=>{if(!i||!Q&&!l)return null;const k=o(e["panel-details"],{[e["panel-details--open"]]:l,[e["panel-details--line"]]:m==="line",[e["panel-details--white"]]:m==="white",[e["panel-details--with-icon"]]:c});return t.createElement("div",{className:k,"data-testid":"panel-details"},t.createElement("div",null,i))};return t.createElement("div",{ref:v,"data-testid":U,className:Z,"data-analyticsid":ce.Panel},t.createElement("div",{className:P},c&&!B&&t.createElement("div",{className:e.panel__icon},c),t.createElement("div",{className:V},t.createElement("div",{className:ee},t.createElement(Ne,{status:p,statusMessage:h}),g&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(ie,{appearance:"title3",htmlMarkup:L,id:I},g),h&&p==="new"&&t.createElement(ge,{color:"blueberry",testId:"badge-status",className:e.panel__badge},h)),F,R>=j.lg&&t.createElement(X,{date:w,time:N})),t.createElement("div",{className:te},r&&t.createElement("div",{className:ae},r),(i||f||w||N||u)&&t.createElement("div",{className:re},R<j.lg&&t.createElement(X,{date:w,time:N}),(i||f||u)&&t.createElement("div",{className:ne},le())))),c&&B&&t.createElement("div",{className:e["panel__icon--right"]},c)),oe())});export{qe as P,he as a,Ce as b,we as c};
 //# sourceMappingURL=Panel.js.map

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId}>\n                  {title}\n                </Title>\n                {statusMessage && status === PanelStatus.new && (\n                  <Badge color=\"blueberry\" testId=\"badge-status\" className={panelStyles.panel__badge}>\n                    {statusMessage}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {contentA}\n            {breakpoint >= Breakpoint.lg && <DateTime date={date} time={time} />}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {breakpoint < Breakpoint.lg && <DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","breakpoint","useBreakpoint","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Breakpoint"],"mappings":"k6BAuBY,IAAAA,IAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAJEA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,KAAO,OAJGA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,SAAW,WACXA,EAAA,SAAW,WALDA,IAAAA,IAAA,CAAA,CAAA,EAqEZ,MAAMC,GAAsF,CAAC,CAAE,OAAAC,EAAQ,cAAAC,KAAoB,CACzH,MAAMC,EAAa,IACbF,IAAW,QACN,CAAE,MAAOG,EAAQ,UAAW,QAASC,EAAc,EAGrD,CAAE,MAAOD,EAAQ,MAAO,QAASE,EAAO,EAG3CC,EAAqBC,EAAWC,EAAY,kBAAmB,CACnE,CAACA,EAAY,wBAAyBR,IAAW,KAAA,CAClD,EAED,OAAKA,IAAW,SAAqBA,IAAW,UAAsBC,EAEjEQ,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAoB,cAAY,gBAAA,EAC5CG,EAAA,cAAAC,EAAA,CAAM,GAAGR,EAAW,EAAG,KAAMS,EAAS,MAAA,CAAQ,EAAG,IAAEF,EAAA,cAAA,OAAA,KAAMR,CAAc,CAC3E,EAIG,IACT,EAEMW,EAAuD,CAAC,CAAE,KAAAC,EAAM,KAAAC,KAChED,GAAQC,EAEPL,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAY,sBAAuB,cAAY,UAAA,EAC5DK,GACEJ,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAY,2BAAA,EACzBC,EAAA,cAAAC,EAAA,CAAK,QAASK,GAAU,KAAMJ,EAAS,MAAQ,CAAA,EAC/CF,EAAA,cAAA,OAAA,KAAMI,CAAK,CACd,EAEDC,GACEL,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAY,2BAAA,EACzBC,EAAA,cAAAC,EAAA,CAAK,QAASM,GAAO,KAAML,EAAS,MAAA,CAAQ,EAC7CF,EAAA,cAAC,OAAM,KAAAK,CAAK,CACd,CAEJ,EAIG,KAGHG,GAAQR,EAAM,WAAW,SAA2BS,EAAmBC,EAA6C,CAClH,KAAA,CACJ,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,gBAAAC,EAAkB,KAClB,IAAAC,EACA,OAAAC,EAAS,QACT,KAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EAAU,OACV,OAAA/B,EAAS,SACT,cAAAC,EACA,WAAA+B,EAAa,cACb,gBAAAC,EAAkB,iBAClB,uBAAAC,EACA,gBAAAC,EACA,OAAAC,EAAS,UACT,kBAAAC,EAAoB,GACpB,KAAAxB,EACA,KAAAC,EACA,YAAAwB,EACA,cAAAC,EACA,iBAAAC,EAAmB,IACnB,SAAAC,EAAW,GACX,SAAAC,EACA,yBAAAC,EAA2B,EACzB,EAAAzB,EAEE,CAAC0B,EAAYC,CAAa,EAAIC,GAAkBL,CAAQ,EACxDM,EAAqBC,GAAYJ,CAAU,EAC3CK,EAAUC,IACVC,EAAeD,IACfE,EAAaC,KAEnBC,EAAU,IAAM,CACVb,IAAaG,GACfC,EAAcJ,CAAQ,CACxB,EACC,CAACA,CAAQ,CAAC,EAEba,EAAU,IAAM,CACVZ,GAAYE,IAAe,CAAC,CAACG,GAC/BL,EAASE,CAAU,CACrB,EACC,CAACA,EAAYF,CAAQ,CAAC,EAEzB,MAAMa,EAAU,CAAC,WAAqB,SAAA,EAAY,WAAqB,WAAY,WAAqB,SAAU,CAAA,EAAE,SAASnB,CAAM,EAE7HoB,EAAoBjD,EAAWC,EAAY,iBAAkBe,CAAS,EAEtEkC,EAAelD,EAAWC,EAAY,MAAO,CACjD,CAACA,EAAY,gBAAiBuB,IAAY,OAC1C,CAACvB,EAAY,kBAAmBuB,IAAY,SAC5C,CAACvB,EAAY,iBAAkBuB,IAAY,QAC3C,CAACvB,EAAY,gBAAiBuB,IAAY,OAC1C,CAACvB,EAAY,yBAA0BuB,IAAY,QAAqBO,EACxE,CAAC9B,EAAY,oBAAqBoC,EAClC,CAACpC,EAAY,eAAgBR,IAAW,MACxC,CAACQ,EAAY,iBAAkBR,IAAW,QAC1C,CAACQ,EAAY,iBAAkBR,IAAW,QAC1C,CAACQ,EAAY,kBAAmBR,GAAUA,IAAW,SACrD,CAACQ,EAAY,qBAAsBqB,EACnC,CAACrB,EAAY,kBAAmB6B,EAChC,CAAC7B,EAAY,qBAAsBY,GAAYO,GAAOe,GAAYH,GAAiBF,CAAA,CACpF,EAEKqB,EAAiBnD,EAAW,CAChC,CAACC,EAAY,kBAAsB4B,IAAW,WAAuBd,EACrE,CAACd,EAAY,8BAA+B+C,GAAWjC,EACvD,CAACd,EAAY,2BAA4BqB,CAAA,CAC1C,EAEK8B,GAAwBpD,EAAW,CACvC,CAACC,EAAY,oBAAqB4B,IAAW,UAC7C,CAAC5B,EAAY,8BAA+B4B,IAAW,WACvD,CAAC5B,EAAY,8BAA+B4B,IAAW,WACvD,CAAC5B,EAAY,8BAA+B4B,IAAW,UAAA,CACxD,EAEKwB,GAAyBrD,EAAW,CACxC,CAACC,EAAY,kCAAmCc,GAAYc,IAAW,UACvE,CAAC5B,EAAY,kCAAmCc,GAAYc,IAAW,UACvE,CAAC5B,EAAY,kCAAmCc,GAAYiC,EAC5D,CAAC/C,EAAY,mCAAoCc,GAAYc,IAAW,WACxE,CAAC5B,EAAY,mCAAoCc,GAAYc,IAAW,WACxE,CAAC5B,EAAY,mCAAoCc,GAAYc,IAAW,UAAA,CACzE,EAEKyB,GAAqBtD,EAAWC,EAAY,mBAAoB,CACpE,CAACA,EAAY,6BAA8B4B,IAAW,UACtD,CAAC5B,EAAY,6BAA8B+C,CAAA,CAC5C,EAEKO,GAAsBvD,EAAWC,EAAY,qBAAqB,EAElEuD,GAAsB,IAAmB,CAC7C,MAAMC,EAAsBC,GAAuB,CACjD,MAAO9B,EACP,GAAKD,GAA0B,GAAGiB,KAAgBjB,KAA8BT,GAASwB,GAAW,GAAGE,KAAgBF,GAAA,CACxH,EAEKiB,EAA0D,CAC9D,QAAS3B,IAAgC,IAAMM,EAAc,CAACD,CAAU,GACxE,UAAWP,EAAoB7B,EAAY,cAAmB,OAC9D,QAAS,aACT,SAAU,GACV,GAAGwD,CAAA,EAGD,OAAE5C,EAEDX,EAAA,cAAA0D,EAAA,CAAO,OAAO,SAAS,gBAAevB,EAAa,GAAGsB,CAAA,EACpDzD,EAAA,cAAA,OAAA,CAAK,GAAI0C,CAAA,EAAeP,EAAaX,EAAkBD,CAAW,EAClEvB,EAAA,cAAAC,EAAA,CAAK,QAASkC,EAAawB,GAAYC,EAAa,CAAA,CACvD,EAKD5D,EAAA,cAAA0D,EAAA,CAAO,OAAO,MAAM,WAAY3B,EAAkB,KAAMb,EAAK,OAAAC,EAAiB,GAAGsC,CAAA,EAC/EzD,EAAA,cAAA,OAAA,CAAK,GAAI0C,CAAe,EAAAnB,CAAW,EACnCvB,EAAA,cAAAC,EAAA,CAAK,QAAS4D,EAAY,CAAA,CAC7B,CAAA,EAIEC,GAAoBhE,EAAWC,EAAY,wBAAyB,CACxE,CAACA,EAAY,kCAAmC+C,EAChD,CAAC/C,EAAY,sCAAuCc,CAAA,CACrD,EAEKkD,GAAgB,IAAM,CAItB,GAHA,CAACpD,GAGD,CAACuB,GAA4B,CAACC,EACzB,OAAA,KAGH,MAAA6B,EAAsBlE,EAAWC,EAAY,iBAAkB,CACnE,CAACA,EAAY,wBAAyBoC,EACtC,CAACpC,EAAY,wBAAyBuB,IAAY,OAClD,CAACvB,EAAY,yBAA0BuB,IAAY,QACnD,CAACvB,EAAY,6BAA8BqB,CAAA,CAC5C,EAED,OACGpB,EAAA,cAAA,MAAA,CAAI,UAAWgE,EAAqB,cAAY,eAAA,EAC/ChE,EAAA,cAAC,MAAK,KAAAW,CAAS,CACjB,CAAA,EAIJ,OACGX,EAAA,cAAA,MAAA,CAAI,IAAAU,EAAU,cAAaK,EAAQ,UAAWgC,EAAmB,mBAAkBkB,GAAY,KAAA,EAC7FjE,EAAA,cAAA,MAAA,CAAI,UAAWgD,CACb,EAAA5B,GAAQ,CAACC,GAAcrB,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAY,WAAc,EAAAqB,CAAK,EACrEpB,EAAA,cAAA,MAAA,CAAI,UAAWiD,CAAA,EACbjD,EAAA,cAAA,MAAA,CAAI,UAAWkD,EAAA,EACblD,EAAA,cAAAV,GAAA,CAAW,OAAAC,EAAgB,cAAAC,CAA8B,CAAA,EACzDwB,GACEhB,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAY,mCAAA,EACzBC,EAAA,cAAAkE,GAAA,CAAM,WAAW,SAAS,WAAYjD,EAAiB,GAAIuB,CAAA,EACzDxB,CACH,EACCxB,GAAiBD,IAAW,OAC1BS,EAAA,cAAAmE,GAAA,CAAM,MAAM,YAAY,OAAO,eAAe,UAAWpE,EAAY,YAAA,EACnEP,CACH,CAEJ,EAEDoB,EACA+B,GAAcyB,EAAW,IAAOpE,EAAA,cAAAG,EAAA,CAAS,KAAAC,EAAY,KAAAC,CAAY,CAAA,CACpE,EACCL,EAAA,cAAA,MAAA,CAAI,UAAWmD,EAAA,EACbtC,GAAab,EAAA,cAAA,MAAA,CAAI,UAAWoD,EAAA,EAAqBvC,CAAS,GACzDF,GAAYO,GAAOd,GAAQC,GAAQyB,IAClC9B,EAAA,cAAA,MAAA,CAAI,UAAW8D,EAAA,EACbnB,EAAayB,EAAW,IAAOpE,EAAA,cAAAG,EAAA,CAAS,KAAAC,EAAY,KAAAC,CAAA,CAAY,GAC/DM,GAAYO,GAAOY,IAAmB9B,EAAA,cAAA,MAAA,CAAI,UAAWqD,EAAA,EAAsBC,GAAA,CAAsB,CACrG,CAEJ,CACF,EACClC,GAAQC,GAAcrB,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAY,qBAAA,EAAwBqB,CAAK,CACjF,EACC2C,GAAA,CACH,CAEJ,CAAC"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId}>\n                  {title}\n                </Title>\n                {statusMessage && status === PanelStatus.new && (\n                  <Badge color=\"blueberry\" testId=\"badge-status\" className={panelStyles.panel__badge}>\n                    {statusMessage}\n                  </Badge>\n                )}\n              </div>\n            )}\n            {contentA}\n            {breakpoint >= Breakpoint.lg && <DateTime date={date} time={time} />}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {breakpoint < Breakpoint.lg && <DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","breakpoint","useBreakpoint","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Breakpoint"],"mappings":"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"}

package/Select.js

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

package/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 selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {\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?: string;\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}\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((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,\n    testId,\n    width,\n    required,\n    value,\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const onDark = mode === 'ondark';\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectLabelClasses = classNames(selectStyles['select-wrapper__label-wrapper'], {\n    [selectStyles['select-wrapper__label-wrapper--on-dark']]: onDark,\n  });\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        {label && (\n          <div className={selectLabelClasses}>\n            <label htmlFor={uuid}>{label}</label>\n            {afterLabelChildren && <div className={selectStyles['select-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\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            value={value}\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","testId","width","required","value","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize"],"mappings":"yaAuCA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,CAACC,EAAoBC,IAAsC,CAC1F,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,CACE,EAAAf,EAEEgB,EAAOC,EAAQR,CAAQ,EACvBS,EAAcP,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDa,EAASR,IAAS,SAClBS,EAAY1B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5CyB,EAAWR,EAAQvB,EAAkBuB,CAAK,EAAI,OAE9CS,EAAqBC,EAAWC,EAAa,iCAAkC,CACnF,CAACA,EAAa,2CAA4CL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,wBACb,CACE,CAACA,EAAa,sCAAuCnB,IAAY,cACjE,CAACmB,EAAa,uCAAwCN,EACtD,CAACM,EAAa,kCAAmC7B,EACjD,CAAC6B,EAAa,mCAAoC5B,CACpD,EACAO,CAAA,EAGIuB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,yBAA0BN,EACxC,CAACM,EAAa,oBAAqB7B,CAAA,CACpC,EAED,OACGI,EAAA,cAAA4B,EAAA,CAAa,UAAApB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBgB,EAAY,OAAQ,UAAWJ,EAAa,kBAAmB,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hb,GACET,EAAA,cAAA,MAAA,CAAI,UAAWuB,CAAA,EACbvB,EAAA,cAAA,QAAA,CAAM,QAASiB,CAAO,EAAAR,CAAM,EAC5BN,GAAuBH,EAAA,cAAA,MAAA,CAAI,UAAWyB,EAAa,uCAA0C,EAAAtB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW0B,CAAA,EACb1B,EAAA,cAAA8B,EAAA,CAAK,UAAWL,EAAa,gBAAiB,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAA,CAAQ,EAC7GhC,EAAA,cAAA,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIqB,EACJ,KAAAN,EACA,UAAWgB,EACX,SAAA9B,EACA,IAAAK,EACA,SAAAa,EACA,MAAAC,CAAA,EAECX,CACH,CACF,CACF,CACF,CAEJ,CAAC"}