@helsenorge/designsystem-react 15.5.0 → 15.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/lib/AnchorLink.js.map +1 -1
  2. package/lib/Avatar.js.map +1 -1
  3. package/lib/Button.js.map +1 -1
  4. package/lib/CHANGELOG.md +8 -0
  5. package/lib/Checkbox.js +6 -4
  6. package/lib/Checkbox.js.map +1 -1
  7. package/lib/Checkbox2.js.map +1 -1
  8. package/lib/CheckboxMarker.js.map +1 -1
  9. package/lib/Chip.js.map +1 -1
  10. package/lib/Close.js.map +1 -1
  11. package/lib/Drawer.js.map +1 -1
  12. package/lib/DrawerNavigation.js.map +1 -1
  13. package/lib/Duolist.js.map +1 -1
  14. package/lib/ElementHeader.js.map +1 -1
  15. package/lib/ElementHeaderText.js.map +1 -1
  16. package/lib/ErrorWrapper.js +2 -1
  17. package/lib/ErrorWrapper.js.map +1 -1
  18. package/lib/Expander.js +2 -1
  19. package/lib/Expander.js.map +1 -1
  20. package/lib/FilterButton.js.map +1 -1
  21. package/lib/FilterButtonAndChipsWrapper.js.map +1 -1
  22. package/lib/FilterDrawer.js.map +1 -1
  23. package/lib/FilterLinkList.js +2 -1
  24. package/lib/FilterLinkList.js.map +1 -1
  25. package/lib/FilterOverviewSearch.js.map +1 -1
  26. package/lib/FilterResultCountAndSortWrapper.js.map +1 -1
  27. package/lib/FilterSearch.js.map +1 -1
  28. package/lib/FormFieldTag.js.map +1 -1
  29. package/lib/FormGroup.js.map +1 -1
  30. package/lib/FormLayout.js.map +1 -1
  31. package/lib/HelpDetails.js.map +1 -1
  32. package/lib/HelpTriggerIcon.js.map +1 -1
  33. package/lib/HelpTriggerStandalone.js.map +1 -1
  34. package/lib/HighlightPanel.js.map +1 -1
  35. package/lib/Highlighter.js.map +1 -1
  36. package/lib/HorizontalScroll.js.map +1 -1
  37. package/lib/Icon.js.map +1 -1
  38. package/lib/Illustration.js.map +1 -1
  39. package/lib/InfoTeaser.js.map +1 -1
  40. package/lib/Input.js.map +1 -1
  41. package/lib/LazyIcon.js.map +1 -1
  42. package/lib/LazyIllustration.js.map +1 -1
  43. package/lib/LinkList.js +31 -28
  44. package/lib/LinkList.js.map +1 -1
  45. package/lib/List.js +4 -2
  46. package/lib/List.js.map +1 -1
  47. package/lib/ListEditMode.js +5 -4
  48. package/lib/ListEditMode.js.map +1 -1
  49. package/lib/LoaderSpinner.js.map +1 -1
  50. package/lib/MaxCharacters.js.map +1 -1
  51. package/lib/PanelTitle.js.map +1 -1
  52. package/lib/PopOver.js +5 -2
  53. package/lib/PopOver.js.map +1 -1
  54. package/lib/Radio.js.map +1 -1
  55. package/lib/RadioButton.js.map +1 -1
  56. package/lib/RadioMarker.js +11 -10
  57. package/lib/RadioMarker.js.map +1 -1
  58. package/lib/Select.js.map +1 -1
  59. package/lib/SingleSelectItem.js.map +1 -1
  60. package/lib/Slider.js +0 -2
  61. package/lib/Slider.js.map +1 -1
  62. package/lib/Spacer.js +16 -15
  63. package/lib/Spacer.js.map +1 -1
  64. package/lib/StatusDot.js.map +1 -1
  65. package/lib/StatusDotList.js.map +1 -1
  66. package/lib/StepButtons.js.map +1 -1
  67. package/lib/TabList.js.map +1 -1
  68. package/lib/TabPanel.js +2 -1
  69. package/lib/TabPanel.js.map +1 -1
  70. package/lib/TableBody.js +2 -1
  71. package/lib/TableBody.js.map +1 -1
  72. package/lib/TableCell.js +2 -1
  73. package/lib/TableCell.js.map +1 -1
  74. package/lib/TableExpandedRow.js +6 -3
  75. package/lib/TableExpandedRow.js.map +1 -1
  76. package/lib/TableExpanderCell.js +2 -1
  77. package/lib/TableExpanderCell.js.map +1 -1
  78. package/lib/TableHead.js +7 -6
  79. package/lib/TableHead.js.map +1 -1
  80. package/lib/TableHeadCell.js.map +1 -1
  81. package/lib/TableRow.js +7 -5
  82. package/lib/TableRow.js.map +1 -1
  83. package/lib/Textarea.js.map +1 -1
  84. package/lib/Title.js +20 -17
  85. package/lib/Title.js.map +1 -1
  86. package/lib/Toast.js.map +1 -1
  87. package/lib/VisualCheckbox.js.map +1 -1
  88. package/lib/VisualRadio.js.map +1 -1
  89. package/lib/components/ArticleTeaser/index.js.map +1 -1
  90. package/lib/components/Dropdown/index.js.map +1 -1
  91. package/lib/components/DropdownOld/index.js.map +1 -1
  92. package/lib/components/EmptyState/index.js +1 -3
  93. package/lib/components/EmptyState/index.js.map +1 -1
  94. package/lib/components/ExpanderHierarchy/index.js +2 -1
  95. package/lib/components/ExpanderHierarchy/index.js.map +1 -1
  96. package/lib/components/ExpanderList/index.js +7 -6
  97. package/lib/components/ExpanderList/index.js.map +1 -1
  98. package/lib/components/EyebrowHeader/index.js.map +1 -1
  99. package/lib/components/FavoriteButton/index.js +9 -7
  100. package/lib/components/FavoriteButton/index.js.map +1 -1
  101. package/lib/components/HelpBubble/index.js.map +1 -1
  102. package/lib/components/HelpExpanderInline/index.js.map +1 -1
  103. package/lib/components/HelpExpanderStandalone/index.js.map +1 -1
  104. package/lib/components/HelpTooltip/index.js +6 -3
  105. package/lib/components/HelpTooltip/index.js.map +1 -1
  106. package/lib/components/HelpTriggerInline/index.js.map +1 -1
  107. package/lib/components/Icons/AlarmClock.js.map +1 -1
  108. package/lib/components/Icons/Bus.js.map +1 -1
  109. package/lib/components/Illustrations/BabyMobile.js +5 -4
  110. package/lib/components/Illustrations/BabyMobile.js.map +1 -1
  111. package/lib/components/Illustrations/BabyMobileMedium.js.map +1 -1
  112. package/lib/components/Illustrations/Child.js +5 -4
  113. package/lib/components/Illustrations/Child.js.map +1 -1
  114. package/lib/components/Illustrations/ChildMedium.js.map +1 -1
  115. package/lib/components/Illustrations/Doctor.js +10 -8
  116. package/lib/components/Illustrations/Doctor.js.map +1 -1
  117. package/lib/components/Illustrations/DoctorMedium.js.map +1 -1
  118. package/lib/components/Illustrations/DoctorSmall.js.map +1 -1
  119. package/lib/components/Illustrations/EyeContact.js +5 -4
  120. package/lib/components/Illustrations/EyeContact.js.map +1 -1
  121. package/lib/components/Illustrations/EyeContactMedium.js.map +1 -1
  122. package/lib/components/Illustrations/FacialRecognitionFingerprint.js +5 -4
  123. package/lib/components/Illustrations/FacialRecognitionFingerprint.js.map +1 -1
  124. package/lib/components/Illustrations/FacialRecognitionFingerprintMedium.js.map +1 -1
  125. package/lib/components/Illustrations/GiveBabyFood.js +5 -4
  126. package/lib/components/Illustrations/GiveBabyFood.js.map +1 -1
  127. package/lib/components/Illustrations/GiveBabyFoodMedium.js.map +1 -1
  128. package/lib/components/Illustrations/HealthcarePersonnel.js +10 -8
  129. package/lib/components/Illustrations/HealthcarePersonnel.js.map +1 -1
  130. package/lib/components/Illustrations/HealthcarePersonnelMedium.js.map +1 -1
  131. package/lib/components/Illustrations/HealthcarePersonnelSmall.js.map +1 -1
  132. package/lib/components/Illustrations/ReadLetters.js +5 -4
  133. package/lib/components/Illustrations/ReadLetters.js.map +1 -1
  134. package/lib/components/Illustrations/ReadLettersMedium.js.map +1 -1
  135. package/lib/components/Illustrations/SkinToSkin.js +5 -4
  136. package/lib/components/Illustrations/SkinToSkin.js.map +1 -1
  137. package/lib/components/Illustrations/SkinToSkinMedium.js.map +1 -1
  138. package/lib/components/Illustrations/Stork.js +5 -4
  139. package/lib/components/Illustrations/Stork.js.map +1 -1
  140. package/lib/components/Illustrations/StorkMedium.js.map +1 -1
  141. package/lib/components/Illustrations/Stroller.js +5 -4
  142. package/lib/components/Illustrations/Stroller.js.map +1 -1
  143. package/lib/components/Illustrations/StrollerMedium.js.map +1 -1
  144. package/lib/components/Illustrations/Support2.js +5 -4
  145. package/lib/components/Illustrations/Support2.js.map +1 -1
  146. package/lib/components/Illustrations/Support2Medium.js.map +1 -1
  147. package/lib/components/Illustrations/Thinking.js +5 -4
  148. package/lib/components/Illustrations/Thinking.js.map +1 -1
  149. package/lib/components/Illustrations/ThinkingMedium.js.map +1 -1
  150. package/lib/components/Loader/index.js +14 -13
  151. package/lib/components/Loader/index.js.map +1 -1
  152. package/lib/components/Logo/index.js.map +1 -1
  153. package/lib/components/Modal/index.js.map +1 -1
  154. package/lib/components/NotificationPanel/index.js +7 -4
  155. package/lib/components/NotificationPanel/index.js.map +1 -1
  156. package/lib/components/Panel/index.js +17 -16
  157. package/lib/components/Panel/index.js.map +1 -1
  158. package/lib/components/PanelList/index.js.map +1 -1
  159. package/lib/components/PopMenu/index.js.map +1 -1
  160. package/lib/components/Progressbar/index.js +6 -5
  161. package/lib/components/Progressbar/index.js.map +1 -1
  162. package/lib/components/PromoPanel/index.js.map +1 -1
  163. package/lib/components/ServiceMessage/index.js +2 -1
  164. package/lib/components/ServiceMessage/index.js.map +1 -1
  165. package/lib/components/SharingStatus/index.js.map +1 -1
  166. package/lib/components/Step/index.js.map +1 -1
  167. package/lib/components/Stepper/index.js +4 -2
  168. package/lib/components/Stepper/index.js.map +1 -1
  169. package/lib/components/StickyNote/index.js.map +1 -1
  170. package/lib/components/Table/index.js +2 -5
  171. package/lib/components/Table/index.js.map +1 -1
  172. package/lib/components/Tabs/index.js.map +1 -1
  173. package/lib/components/Tag/index.js +2 -1
  174. package/lib/components/Tag/index.js.map +1 -1
  175. package/lib/components/TagList/index.js.map +1 -1
  176. package/lib/components/Tile/index.js +5 -4
  177. package/lib/components/Tile/index.js.map +1 -1
  178. package/lib/components/ToastList/index.js +2 -1
  179. package/lib/components/ToastList/index.js.map +1 -1
  180. package/lib/components/Toggle/index.js +7 -4
  181. package/lib/components/Toggle/index.js.map +1 -1
  182. package/lib/components/Validation/index.js.map +1 -1
  183. package/lib/components/VisualCheckboxCloud/index.js.map +1 -1
  184. package/lib/components/VisualCheckboxGroup/index.js.map +1 -1
  185. package/lib/components/VisualContentgroupWithImage/index.js.map +1 -1
  186. package/lib/components/VisualRadioCloud/index.js.map +1 -1
  187. package/lib/components/VisualRadioGroup/index.js.map +1 -1
  188. package/lib/floating-ui.react.js +91 -111
  189. package/lib/floating-ui.react.js.map +1 -1
  190. package/lib/getFilterChips.js.map +1 -1
  191. package/lib/theme/spacers.js +2 -2
  192. package/lib/theme/spacers.js.map +1 -1
  193. package/lib/utils2.js.map +1 -1
  194. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"ElementHeader.js","names":[],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n let avatarChild: React.ReactElement<AvatarProps> | undefined;\n const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n const stringChildren: string[] = [];\n const remainingChildren: React.ReactNode[] = [];\n\n React.Children.forEach(children, child => {\n if (child === null || typeof child === 'undefined') return;\n if (isComponent<AvatarProps>(child, Avatar)) {\n avatarChild = child;\n } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n elementHeaderTextChildren.push(child);\n } else if (isComponent<BadgeProps>(child, Badge)) {\n badgeChildren.push(child);\n } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n statusDotMCChild = child;\n } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n statusDotChildren.push(child);\n } else if (typeof child === 'string') {\n stringChildren.push(child);\n } else {\n remainingChildren.push(child);\n }\n });\n\n // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n const hasSpecialChildren =\n avatarChild !== undefined ||\n elementHeaderTextChildren.length > 0 ||\n statusDotChildren.length > 0 ||\n statusDotMCChild !== undefined ||\n (badgeChildren !== undefined && stringChildren.length > 0);\n const noRemainingRecursiveChildren =\n remainingChildren.length === 0 ||\n (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n return {\n avatarChild,\n elementHeaderTextChildren: elementHeaderTextChildren,\n badgeChildren,\n statusDotChildren,\n statusDotMCChild,\n stringChildren,\n remainingChildren,\n };\n }\n\n if (isComponentWithChildren(remainingChildren[0])) {\n return mapChildren(remainingChildren[0]?.props?.children, true);\n }\n};\n\nexport const renderElementHeader = (\n element: React.ReactNode,\n options: Pick<\n ElementHeaderProps,\n 'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n >\n): React.ReactElement | undefined => {\n const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n return React.cloneElement(element, {\n chevronIcon,\n icon,\n isHovered,\n size,\n parentType,\n highlightText,\n closeButton,\n });\n }\n if (element) {\n return (\n <ElementHeader\n highlightText={highlightText}\n titleHtmlMarkup={titleHtmlMarkup}\n parentType={parentType}\n chevronIcon={chevronIcon}\n icon={icon}\n isHovered={isHovered}\n size={size}\n closeButton={closeButton}\n >\n {element}\n </ElementHeader>\n );\n }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n Avatar?: AvatarType;\n Badge?: BadgeType;\n ElementHeaderText?: ElementHeaderTextType;\n StatusDot?: StatusDotType;\n StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n /** Adds custom classes to the ElementHeader element. */\n className?: string;\n /** Chevron to render inside of the ElementHeader */\n chevronIcon?: SvgIcon;\n /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n closeButton?: React.ReactElement;\n /** Children to be rendered inside of ElementHeader */\n children: React.ReactNode;\n /** Changes the underlying element of the title. Default: h2*/\n titleHtmlMarkup?: TitleTags;\n /** icon to be rendered inside of ElementHeader */\n icon?: React.ReactElement;\n /** whether or not the parent is hovered */\n isHovered?: boolean;\n /** Adjusts styling based on parent */\n parentType?: ParentType;\n /** Changes size of the ElementHeader. */\n size?: ElementHeaderSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Highlights text in title. Used for search results */\n highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n avatarChild?: React.ReactElement<AvatarProps>;\n elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n badgeChildren?: React.ReactElement<BadgeProps>[];\n statusDotChildren?: React.ReactElement<StatusDotProps>[];\n statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n elementChild?: React.ReactElement;\n stringChildren: string[];\n remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n const {\n className = '',\n titleHtmlMarkup = 'h2',\n parentType = 'linklist',\n chevronIcon,\n closeButton,\n children,\n icon,\n isHovered,\n size,\n testId,\n highlightText,\n } = props;\n const breakpoint = useBreakpoint();\n const showIcon = size !== 'small' && !!icon;\n const contentIsString = typeof children === 'string';\n const mappedChildren = mapChildren(children);\n const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n const badgeContainerClasses = cn(styles['element-header__badge-container']);\n const badgeClasses = cn(styles['element-header__badge']);\n const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n const chevronClasses = cn(styles['element-header__chevron']);\n const contentClasses = cn(styles['element-header__content'], {\n [styles['element-header__content--element']]: !contentIsString,\n [styles['element-header__content--compact']]: size === 'compact',\n });\n const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n const avatarClasses = cn(styles['element-header__avatar'], {});\n const CustomTag = titleHtmlMarkup;\n const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n let iconComponent;\n if (iconPropIsIconComponent) {\n iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n isHovered,\n });\n } else if (iconPropIsLazyIconComponent) {\n iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n isHovered,\n });\n } else {\n iconComponent = icon;\n }\n\n return (\n <span data-testid={testId} className={listLabelClasses}>\n {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n {size !== 'small' && mappedChildren?.avatarChild && (\n <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n )}\n\n <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n {mappedChildren?.elementHeaderTextChildren}\n {!!mappedChildren?.stringChildren.length && (\n <CustomTag className={styles['element-header__title']}>\n <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n </CustomTag>\n )}\n <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n </span>\n\n {hasStatusDots && (\n <span className={statusdotContainerClasses}>\n {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n </span>\n )}\n\n <span className={badgeContainerClasses}>\n {mappedChildren?.badgeChildren &&\n mappedChildren.badgeChildren.map((badgeChild, index) => {\n return (\n <span key={index} className={badgeClasses} data-parenttype={parentType}>\n {badgeChild}\n </span>\n );\n })}\n </span>\n {chevronIcon && typeof closeButton === 'undefined' && (\n <span className={chevronClasses} data-parenttype={parentType}>\n <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n </span>\n )}\n {closeButton && (\n <span className={chevronClasses} data-parenttype={parentType}>\n {closeButton}\n </span>\n )}\n </span>\n );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n Text: React.FC<ElementHeaderTextProps>;\n StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}
1
+ {"version":3,"file":"ElementHeader.js","names":[],"sources":["../src/components/ElementHeader/utils.tsx","../src/components/ElementHeader/ElementHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { AvatarProps } from '../Avatar';\nimport type { BadgeProps } from '../Badge';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport ElementHeader, { type ElementHeaderChildren, type ElementHeaderProps } from './ElementHeader';\nimport { ElementHeaderText, type ElementHeaderTextProps } from './ElementHeaderText';\nimport { StatusDotList, type StatusDotListProps } from './StatusDotList';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar from '../Avatar';\nimport Badge from '../Badge';\nimport StatusDot from '../StatusDot';\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n let avatarChild: React.ReactElement<AvatarProps> | undefined;\n const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];\n let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;\n const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];\n const stringChildren: string[] = [];\n const remainingChildren: React.ReactNode[] = [];\n\n React.Children.forEach(children, child => {\n if (child === null || typeof child === 'undefined') return;\n if (isComponent<AvatarProps>(child, Avatar)) {\n avatarChild = child;\n } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {\n elementHeaderTextChildren.push(child);\n } else if (isComponent<BadgeProps>(child, Badge)) {\n badgeChildren.push(child);\n } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {\n statusDotMCChild = child;\n } else if (isComponent<StatusDotProps>(child, StatusDot)) {\n statusDotChildren.push(child);\n } else if (typeof child === 'string') {\n stringChildren.push(child);\n } else {\n remainingChildren.push(child);\n }\n });\n\n // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n const hasSpecialChildren =\n avatarChild !== undefined ||\n elementHeaderTextChildren.length > 0 ||\n statusDotChildren.length > 0 ||\n statusDotMCChild !== undefined ||\n (badgeChildren !== undefined && stringChildren.length > 0);\n const noRemainingRecursiveChildren =\n remainingChildren.length === 0 ||\n (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n return {\n avatarChild,\n elementHeaderTextChildren: elementHeaderTextChildren,\n badgeChildren,\n statusDotChildren,\n statusDotMCChild,\n stringChildren,\n remainingChildren,\n };\n }\n\n if (isComponentWithChildren(remainingChildren[0])) {\n return mapChildren(remainingChildren[0]?.props?.children, true);\n }\n};\n\nexport const renderElementHeader = (\n element: React.ReactNode,\n options: Pick<\n ElementHeaderProps,\n 'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText' | 'closeButton'\n >\n): React.ReactElement | undefined => {\n const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText, closeButton } = options;\n\n if (isComponent<ElementHeaderProps>(element, ElementHeader)) {\n return React.cloneElement(element, {\n chevronIcon,\n icon,\n isHovered,\n size,\n parentType,\n highlightText,\n closeButton,\n });\n }\n if (element) {\n return (\n <ElementHeader\n highlightText={highlightText}\n titleHtmlMarkup={titleHtmlMarkup}\n parentType={parentType}\n chevronIcon={chevronIcon}\n icon={icon}\n isHovered={isHovered}\n size={size}\n closeButton={closeButton}\n >\n {element}\n </ElementHeader>\n );\n }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { AvatarProps, AvatarType } from '../Avatar';\nimport type { BadgeProps, BadgeType } from '../Badge';\nimport type { IconProps, SvgIcon } from '../Icon';\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { StatusDotProps, StatusDotType } from '../StatusDot';\nimport type { TitleTags } from '../Title';\nimport type { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';\nimport type { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';\n\nimport ElementHeaderText from './ElementHeaderText/ElementHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent } from '../../utils/component';\nimport { AvatarSize } from '../Avatar';\nimport Icon, { IconSize } from '../Icon';\nimport StatusDotList from './StatusDotList';\nimport Highlighter from '../Highlighter';\nimport LazyIcon from '../LazyIcon';\nimport { mapChildren } from './utils';\n\nimport styles from './styles.module.scss';\n\nexport type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';\nexport type ParentType = 'linklist' | 'expanderlist';\n\nexport interface ElementHeaderType extends React.FC<ElementHeaderProps> {\n Avatar?: AvatarType;\n Badge?: BadgeType;\n ElementHeaderText?: ElementHeaderTextType;\n StatusDot?: StatusDotType;\n StatusDotList?: StatusDotListType;\n}\n\nexport interface ElementHeaderProps {\n /** Adds custom classes to the ElementHeader element. */\n className?: string;\n /** Chevron to render inside of the ElementHeader */\n chevronIcon?: SvgIcon;\n /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */\n closeButton?: React.ReactElement;\n /** Children to be rendered inside of ElementHeader */\n children: React.ReactNode;\n /** Changes the underlying element of the title. Default: h2*/\n titleHtmlMarkup?: TitleTags;\n /** icon to be rendered inside of ElementHeader */\n icon?: React.ReactElement;\n /** whether or not the parent is hovered */\n isHovered?: boolean;\n /** Adjusts styling based on parent */\n parentType?: ParentType;\n /** Changes size of the ElementHeader. */\n size?: ElementHeaderSize;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Highlights text in title. Used for search results */\n highlightText?: string;\n}\n\nexport interface ElementHeaderChildren {\n avatarChild?: React.ReactElement<AvatarProps>;\n elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];\n badgeChildren?: React.ReactElement<BadgeProps>[];\n statusDotChildren?: React.ReactElement<StatusDotProps>[];\n statusDotMCChild?: React.ReactElement<StatusDotListProps>;\n elementChild?: React.ReactElement;\n stringChildren: string[];\n remainingChildren: React.ReactNode[];\n}\n\nexport const ElementHeaderRoot: ElementHeaderType = props => {\n const {\n className = '',\n titleHtmlMarkup = 'h2',\n parentType = 'linklist',\n chevronIcon,\n closeButton,\n children,\n icon,\n isHovered,\n size,\n testId,\n highlightText,\n } = props;\n const breakpoint = useBreakpoint();\n const showIcon = size !== 'small' && !!icon;\n const contentIsString = typeof children === 'string';\n const mappedChildren = mapChildren(children);\n const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;\n\n const listLabelClasses = cn(styles['element-header'], { [styles['element-header--compact']]: size === 'compact' }, className);\n const badgeContainerClasses = cn(styles['element-header__badge-container']);\n const badgeClasses = cn(styles['element-header__badge']);\n const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);\n const chevronClasses = cn(styles['element-header__chevron']);\n const contentClasses = cn(styles['element-header__content'], {\n [styles['element-header__content--element']]: !contentIsString,\n [styles['element-header__content--compact']]: size === 'compact',\n });\n const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });\n const avatarClasses = cn(styles['element-header__avatar'], {});\n const CustomTag = titleHtmlMarkup;\n const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);\n const iconPropIsLazyIconComponent = !iconPropIsIconComponent && isComponent<LazyIconProps>(icon, LazyIcon);\n\n let iconComponent;\n if (iconPropIsIconComponent) {\n iconComponent = React.cloneElement(icon as React.ReactElement<IconProps>, {\n size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n isHovered,\n });\n } else if (iconPropIsLazyIconComponent) {\n iconComponent = React.cloneElement(icon as React.ReactElement<LazyIconProps>, {\n size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,\n isHovered,\n });\n } else {\n iconComponent = icon;\n }\n\n return (\n <span data-testid={testId} className={listLabelClasses}>\n {showIcon && icon && <span className={iconClasses}>{iconComponent}</span>}\n {size !== 'small' && mappedChildren?.avatarChild && (\n <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n )}\n\n <span className={contentClasses} data-hasstatusdots={hasStatusDots}>\n {mappedChildren?.elementHeaderTextChildren}\n {!!mappedChildren?.stringChildren.length && (\n <CustomTag className={styles['element-header__title']}>\n <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>\n </CustomTag>\n )}\n <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>\n </span>\n\n {hasStatusDots && (\n <span className={statusdotContainerClasses}>\n {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}\n {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}\n </span>\n )}\n\n <span className={badgeContainerClasses}>\n {mappedChildren?.badgeChildren &&\n mappedChildren.badgeChildren.map((badgeChild, index) => {\n return (\n <span key={index} className={badgeClasses} data-parenttype={parentType}>\n {badgeChild}\n </span>\n );\n })}\n </span>\n {chevronIcon && typeof closeButton === 'undefined' && (\n <span className={chevronClasses} data-parenttype={parentType}>\n <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n </span>\n )}\n {closeButton && (\n <span className={chevronClasses} data-parenttype={parentType}>\n {closeButton}\n </span>\n )}\n </span>\n );\n};\n\ntype ElementHeaderComponent = typeof ElementHeaderRoot & {\n Text: React.FC<ElementHeaderTextProps>;\n StatusDotList: React.FC<StatusDotListProps>;\n};\nElementHeaderRoot.displayName = 'ElementHeader';\nconst ElementHeader = ElementHeaderRoot as ElementHeaderComponent;\nElementHeader.Text = ElementHeaderText;\nElementHeader.Text.displayName = 'ElementHeader.Text';\nElementHeader.StatusDotList = StatusDotList;\nElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';\n\nexport default ElementHeader;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ElementHeaderText.js","names":[],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n /** The first text in the ElementHeaderText Component */\n firstText: string;\n /** Will style the first text as bold */\n firstTextEmphasised?: boolean;\n /** The second text in the ElementHeaderText Component */\n secondText?: string;\n /** Will style the second text as bold */\n secondTextEmphasised?: boolean;\n /** Whether or not this ElementHeaderText is a sub text */\n subText?: boolean;\n /** Adds custom classes to the ElementHeaderText component. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Changes the underlying element of the text. Default: span*/\n titleHtmlMarkup?: TitleTags;\n /** Highlights text. Used for search results */\n highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n const {\n firstText,\n firstTextEmphasised = false,\n secondText = undefined,\n secondTextEmphasised = false,\n subText = false,\n className = '',\n testId,\n titleHtmlMarkup = 'span',\n highlightText,\n } = props;\n\n const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n [styles['text-wrapper--sub-level']]: subText,\n });\n const firstHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n });\n const secondHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n });\n const CustomTag = titleHtmlMarkup;\n\n return (\n <span data-testid={testId} className={headerTextWrapperClasses}>\n <CustomTag className={styles['element-header__title']}>\n <Highlighter searchText={highlightText}>\n <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n </Highlighter>\n </CustomTag>\n </span>\n );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA8BA,IAAa,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,QACvC,CAAC;CACD,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,oBAC9C,CAAC;CACD,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,qBAC9C,CAAC;CAGD,OACE,oBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;YACpC,oBAAC,iBAAD;GAAW,WAAW,OAAO;aAC3B,qBAAC,qBAAD;IAAa,YAAY;cAAzB,CACE,oBAAC,QAAD;KAAM,WAAW;eAAgC;IAAgB,CAAA,GAChE,cAAc,oBAAC,QAAD;KAAM,WAAW;eAAiC;IAAiB,CAAA,CACvE;;EACJ,CAAA;CACP,CAAA;AAEV;;;AC9DA,IAAA,4BAAe"}
1
+ {"version":3,"file":"ElementHeaderText.js","names":[],"sources":["../src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx","../src/components/ElementHeader/ElementHeaderText/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TitleTags } from '../../Title';\n\nimport Highlighter from '../../Highlighter';\nimport styles from '../styles.module.scss';\n\nexport type ElementHeaderTextType = typeof ElementHeaderText;\n\nexport interface ElementHeaderTextProps {\n /** The first text in the ElementHeaderText Component */\n firstText: string;\n /** Will style the first text as bold */\n firstTextEmphasised?: boolean;\n /** The second text in the ElementHeaderText Component */\n secondText?: string;\n /** Will style the second text as bold */\n secondTextEmphasised?: boolean;\n /** Whether or not this ElementHeaderText is a sub text */\n subText?: boolean;\n /** Adds custom classes to the ElementHeaderText component. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Changes the underlying element of the text. Default: span*/\n titleHtmlMarkup?: TitleTags;\n /** Highlights text. Used for search results */\n highlightText?: string;\n}\n\nexport const ElementHeaderText: React.FC<ElementHeaderTextProps> = props => {\n const {\n firstText,\n firstTextEmphasised = false,\n secondText = undefined,\n secondTextEmphasised = false,\n subText = false,\n className = '',\n testId,\n titleHtmlMarkup = 'span',\n highlightText,\n } = props;\n\n const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n [styles['text-wrapper--sub-level']]: subText,\n });\n const firstHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n });\n const secondHeaderTextSegmentClasses = cn({\n [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n });\n const CustomTag = titleHtmlMarkup;\n\n return (\n <span data-testid={testId} className={headerTextWrapperClasses}>\n <CustomTag className={styles['element-header__title']}>\n <Highlighter searchText={highlightText}>\n <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n </Highlighter>\n </CustomTag>\n </span>\n );\n};\n\nexport default ElementHeaderText;\n","import ElementHeaderText from './ElementHeaderText';\nexport * from './ElementHeaderText';\nexport default ElementHeaderText;\n"],"mappings":";;;;;AA8BA,IAAa,qBAAsD,UAAS;CAC1E,MAAM,EACJ,WACA,sBAAsB,OACtB,aAAa,KAAA,GACb,uBAAuB,OACvB,UAAU,OACV,YAAY,IACZ,QACA,kBAAkB,QAClB,kBACE;CAEJ,MAAM,2BAA2B,WAAG,WAAW,OAAO,iBAAiB,GACpE,OAAO,6BAA6B,QACvC,CAAC;CACD,MAAM,gCAAgC,WAAG,GACtC,OAAO,oCAAoC,oBAC9C,CAAC;CACD,MAAM,iCAAiC,WAAG,GACvC,OAAO,oCAAoC,qBAC9C,CAAC;CAGD,OACE,oBAAC,QAAD;EAAM,eAAa;EAAQ,WAAW;EACpC,UAAA,oBAAC,iBAAD;GAAW,WAAW,OAAO;GAC3B,UAAA,qBAAC,qBAAD;IAAa,YAAY;IAAzB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAW;KAAgC,UAAA;IAAgB,CAAA,GAChE,cAAc,oBAAC,QAAD;KAAM,WAAW;KAAiC,UAAA;IAAiB,CAAA,CACvE;;EACJ,CAAA;CACP,CAAA;AAEV;;;AC9DA,IAAA,4BAAe"}
@@ -4,8 +4,9 @@ import styles from "./components/ErrorWrapper/styles.module.scss";
4
4
  //#region src/components/ErrorWrapper/ErrorWrapper.tsx
5
5
  var ErrorWrapper = (props) => {
6
6
  const { renderError = true } = props;
7
+ const errorWrapperClasses = classNames(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);
7
8
  return /* @__PURE__ */ jsxs("div", {
8
- className: classNames(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className),
9
+ className: errorWrapperClasses,
9
10
  "data-testid": props.testId,
10
11
  children: [/* @__PURE__ */ jsx("span", {
11
12
  ref: props.errorMessageRef,
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorWrapper.js","names":[],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n /** Form component */\n children?: React.ReactNode;\n /** Error message */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds a ref to the error message p tag */\n errorMessageRef?: React.Ref<HTMLDivElement>;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n const { renderError = true } = props;\n\n const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n return (\n <div className={errorWrapperClasses} data-testid={props.testId}>\n <span ref={props.errorMessageRef} tabIndex={-1}>\n {props.errorText && (\n <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n {props.errorText}\n </p>\n )}\n </span>\n {props.children}\n </div>\n );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;;AAyBA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;CAI/B,OACE,qBAAC,OAAD;EAAK,WAHqB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,SAG1F;EAAqB,eAAa,MAAM;YAAxD,CACE,oBAAC,QAAD;GAAM,KAAK,MAAM;GAAiB,UAAU;aACzC,MAAM,aACL,oBAAC,KAAD;IAAG,WAAW,OAAO;IAA0B,IAAI,MAAM;cACtD,MAAM;GACN,CAAA;EAED,CAAA,GACL,MAAM,QACJ;;AAET;;;ACxCA,IAAA,uBAAe"}
1
+ {"version":3,"file":"ErrorWrapper.js","names":[],"sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx","../src/components/ErrorWrapper/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n /** Form component */\n children?: React.ReactNode;\n /** Error message */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds a ref to the error message p tag */\n errorMessageRef?: React.Ref<HTMLDivElement>;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n const { renderError = true } = props;\n\n const errorWrapperClasses = cn(props.errorText && renderError && styles[`error-wrapper--with-error`], props.className);\n\n return (\n <div className={errorWrapperClasses} data-testid={props.testId}>\n <span ref={props.errorMessageRef} tabIndex={-1}>\n {props.errorText && (\n <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n {props.errorText}\n </p>\n )}\n </span>\n {props.children}\n </div>\n );\n};\n\nexport default ErrorWrapper;\n","import ErrorWrapper from './ErrorWrapper';\nexport * from './ErrorWrapper';\nexport default ErrorWrapper;\n"],"mappings":";;;;AAyBA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,cAAc,SAAS;CAE/B,MAAM,sBAAsB,WAAG,MAAM,aAAa,eAAe,OAAO,8BAA8B,MAAM,SAAS;CAErH,OACE,qBAAC,OAAD;EAAK,WAAW;EAAqB,eAAa,MAAM;EAAxD,UAAA,CACE,oBAAC,QAAD;GAAM,KAAK,MAAM;GAAiB,UAAU;GACzC,UAAA,MAAM,aACL,oBAAC,KAAD;IAAG,WAAW,OAAO;IAA0B,IAAI,MAAM;IACtD,UAAA,MAAM;GACN,CAAA;EAED,CAAA,GACL,MAAM,QACJ;;AAET;;;ACxCA,IAAA,uBAAe"}
package/lib/Expander.js CHANGED
@@ -94,8 +94,9 @@ var Expander = (props) => {
94
94
  const renderContent = () => {
95
95
  if (!renderChildrenWhenClosed && !isExpanded) return null;
96
96
  const contentClassName = classNames(styles["expander__content"], styles[`expander__content--${size}`], size === ExpanderSize.large && styles[`expander__content--${color || "neutral"}`], size === ExpanderSize.large && icon && styles["expander__content--icon"], isExpanded && styles["expander__content--expanded"], size === ExpanderSize.small && !noNestedLine && styles["expander__content--nested-line--inner"], emphasized && styles["expander__content--emphasized"], { [styles["expander__content--sticky"]]: isSticky }, contentClassNames);
97
+ const leftBorderClassName = classNames(size === ExpanderSize.small && !emphasized && !noNestedLine && styles["expander__content--nested-line--outer"]);
97
98
  return /* @__PURE__ */ jsx("div", {
98
- className: classNames(size === ExpanderSize.small && !emphasized && !noNestedLine && styles["expander__content--nested-line--outer"]),
99
+ className: leftBorderClassName,
99
100
  children: /* @__PURE__ */ jsx("div", {
100
101
  className: contentClassName,
101
102
  children
@@ -1 +1 @@
1
- {"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n buttonId?: string;\n /** Sets the trigger title */\n title: string;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets classnames on the content area */\n contentClassNames?: string;\n /** Sets the size of the expander. Default: ExpanderSize.small */\n size?: ExpanderSize;\n /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n color?: ExpanderColors;\n /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n svgIcon?: SvgIcon | IconName;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n noNestedLine?: boolean;\n /** Emphasizes the content section. Intended for size=ExpanderSize.small. */\n emphasized?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Called when expander 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 /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n buttonId,\n title,\n children,\n size = ExpanderSize.small,\n color,\n contentClassNames,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n emphasized = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses(triggerRef);\n const contentSize = useSize(expanderRef);\n const triggerSize = useSize(triggerRef);\n\n const isSticky = sticky && isExpanded;\n\n const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && styles['expander__trigger--sticky']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n id={buttonId}\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered || isSticky ? zIndex : undefined,\n width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n const renderButton = (): React.ReactNode => (\n <div\n style={{\n width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n }}\n className={classNames(styles['expander__button-container'], {\n [styles['expander__button-container--sticky']]: isSticky,\n })}\n >\n <Button\n id={buttonId}\n variant=\"borderless\"\n textClassName={styles['expander__button__text']}\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n </div>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n emphasized && styles['expander__content--emphasized'],\n { [styles['expander__content--sticky']]: isSticky },\n contentClassNames\n );\n const leftBorderClassName = classNames(\n size === ExpanderSize.small && !emphasized && !noNestedLine && styles['expander__content--nested-line--outer']\n );\n\n return (\n <div className={leftBorderClassName}>\n <div className={contentClassName}>{children}</div>\n </div>\n );\n };\n\n return (\n <div className={styles['expander']} ref={expanderRef}>\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAY,eAAL,yBAAA,cAAA;CACL,aAAA,WAAA;CACA,aAAA,WAAA;;AACF,EAAA,CAAA,CAAA;;;ACoDA,IAAM,YAAoC,UAAS;CACjD,MAAM,EACJ,UACA,OACA,UACA,OAAO,aAAa,OACpB,OACA,mBACA,SAAS,MACT,WAAW,OACX,eAAe,OACf,aAAa,OACb,SAAS,OACT,QACA,UACA,2BAA2B,OAC3B,WACE;CACJ,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,QAAQ;CAChE,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,EAAE,cAAc,iBAAiB,UAAU;CACjD,MAAM,cAAc,QAAQ,WAAW;CACvC,MAAM,cAAc,QAAQ,UAAU;CAEtC,MAAM,WAAW,UAAU;CAE3B,MAAM,iBAAiB,UACrB,oBAAC,QAAD;EAAM,WAAW,WAAW,OAAO,mBAAmB,OAAO,mBAAmB,QAAQ;YACtF,oBAAC,cAAD;GAAM,SAAS,aAAa,YAAY;GAAa,MAAM,SAAS;GAAmB;EAAY,CAAA;CAC/F,CAAA;CAGR,MAAM,mBAAmB,WACvB,OAAO,sBACP,SAAS,aAAa,SAAS,OAAO,sBAAsB,SAC5D,SAAS,aAAa,SAAS,OAAO,sBAAsB,SAAS,cACrE,SAAS,aAAa,SAAS,QAAQ,OAAO,4BAC9C,cAAc,OAAO,gCACrB,YAAY,OAAO,4BACrB;CAEA,MAAM,sBACJ,qBAAC,UAAD;EACE,IAAI;EACJ,MAAK;EACL,WAAW;EACX,OAAO;GACL,QAAQ,aAAa,WAAW,SAAS,KAAA;GACzC,OAAO,YAAY,aAAa,QAAQ,GAAG,YAAY,MAAM,MAAM,KAAA;EACrE;EACA,iBAAe;EACf,KAAK;EACL,eAAqB,cAAc,CAAC,UAAU;EAC9C,eAAa;EACb,oBAAkB,YAAY;YAZhC;GAcG,SAAS,aAAa,SAAS,cAAc,MAAM;GACnD,QACC,oBAAC,QAAD;IAAM,WAAW,WAAW,OAAO,mBAAmB,OAAO,uBAAuB;cACjF,OAAO,SAAS,WACf,oBAAC,kBAAD;KAAU,UAAU;KAAM,MAAM,SAAS;KAAmB;IAAY,CAAA,IAExE,oBAAC,cAAD;KAAM,SAAS;KAAM,MAAM,SAAS;KAAmB;IAAY,CAAA;GAEjE,CAAA;GAEP;GACA,SAAS,aAAa,SAAS,cAAc,OAAO;EAC/C;;CAGV,MAAM,kBAAkB,WAAW,OAAO,qBAAqB,cAAc,OAAO,6BAA6B;CAEjH,MAAM,qBACJ,oBAAC,OAAD;EACE,OAAO;GACL,OAAO,YAAY,aAAa,QAAQ,GAAG,aAAa,MAAM,MAAM,KAAA;GACpE,QAAQ,YAAY,aAAa,SAAS,GAAG,aAAa,OAAO,MAAM,KAAA;EACzE;EACA,WAAW,WAAW,OAAO,+BAA+B,GACzD,OAAO,wCAAwC,SAClD,CAAC;YAED,qBAAC,gBAAD;GACE,IAAI;GACJ,SAAQ;GACR,eAAe,OAAO;GACtB,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAqB,cAAc,CAAC,UAAU;GACtC;GACR,oBAAkB,YAAY;aAThC,CAWE,oBAAC,cAAD;IAAM,SAAS,aAAa,YAAY;IAAa,MAAM,SAAS;GAAS,CAAA,GAC5E,KACK;;CACL,CAAA;CAGP,MAAM,sBAAuC;EAC3C,IAAI,CAAC,4BAA4B,CAAC,YAChC,OAAO;EAGT,MAAM,mBAAmB,WACvB,OAAO,sBACP,OAAO,sBAAsB,SAC7B,SAAS,aAAa,SAAS,OAAO,sBAAsB,SAAS,cACrE,SAAS,aAAa,SAAS,QAAQ,OAAO,4BAC9C,cAAc,OAAO,gCACrB,SAAS,aAAa,SAAS,CAAC,gBAAgB,OAAO,0CACvD,cAAc,OAAO,kCACrB,GAAG,OAAO,+BAA+B,SAAS,GAClD,iBACF;EAKA,OACE,oBAAC,OAAD;GAAK,WALqB,WAC1B,SAAS,aAAa,SAAS,CAAC,cAAc,CAAC,gBAAgB,OAAO,wCAItD;aACd,oBAAC,OAAD;IAAK,WAAW;IAAmB;GAAc,CAAA;EAC9C,CAAA;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAa,KAAK;YAAzC,CACG,SAAS,aAAa,QAAQ,cAAc,IAAI,aAAa,GAC7D,cAAc,CACZ;;AAET;;;AC1LA,IAAA,mBAAe"}
1
+ {"version":3,"file":"Expander.js","names":[],"sources":["../src/components/Expander/constants.ts","../src/components/Expander/Expander.tsx","../src/components/Expander/index.ts"],"sourcesContent":["export enum ExpanderSize {\n small = 'small',\n large = 'large',\n}\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { ExpanderSize } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n buttonId?: string;\n /** Sets the trigger title */\n title: string;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets classnames on the content area */\n contentClassNames?: string;\n /** Sets the size of the expander. Default: ExpanderSize.small */\n size?: ExpanderSize;\n /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n color?: ExpanderColors;\n /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n svgIcon?: SvgIcon | IconName;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n noNestedLine?: boolean;\n /** Emphasizes the content section. Intended for size=ExpanderSize.small. */\n emphasized?: boolean;\n /** Stick expander trigger to top of screen while scrolling down */\n sticky?: boolean;\n /** Called when expander 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 /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Overrides the default z-index of the expander header */\n zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n const {\n buttonId,\n title,\n children,\n size = ExpanderSize.small,\n color,\n contentClassNames,\n svgIcon: icon,\n expanded = false,\n noNestedLine = false,\n emphasized = false,\n sticky = false,\n testId,\n onExpand,\n renderChildrenWhenClosed = false,\n zIndex,\n } = props;\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const expanderRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses(triggerRef);\n const contentSize = useSize(expanderRef);\n const triggerSize = useSize(triggerRef);\n\n const isSticky = sticky && isExpanded;\n\n const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n </span>\n );\n\n const triggerClassName = classNames(\n styles['expander__trigger'],\n size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n isExpanded && styles['expander__trigger--expanded'],\n isSticky && styles['expander__trigger--sticky']\n );\n\n const renderTrigger = (): React.ReactNode => (\n <button\n id={buttonId}\n type=\"button\"\n className={triggerClassName}\n style={{\n zIndex: isHovered || isSticky ? zIndex : undefined,\n width: isSticky && contentSize?.width ? `${contentSize.width}px` : undefined,\n }}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n {size === ExpanderSize.small && renderChevron('left')}\n {icon && (\n <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n {typeof icon === 'string' ? (\n <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n )}\n </span>\n )}\n {title}\n {size === ExpanderSize.large && renderChevron('right')}\n </button>\n );\n\n const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n const renderButton = (): React.ReactNode => (\n <div\n style={{\n width: isSticky && triggerSize?.width ? `${triggerSize?.width}px` : undefined,\n height: isSticky && triggerSize?.height ? `${triggerSize?.height}px` : undefined,\n }}\n className={classNames(styles['expander__button-container'], {\n [styles['expander__button-container--sticky']]: isSticky,\n })}\n >\n <Button\n id={buttonId}\n variant=\"borderless\"\n textClassName={styles['expander__button__text']}\n className={buttonClassName}\n aria-expanded={isExpanded}\n ref={triggerRef}\n onClick={(): void => setIsExpanded(!isExpanded)}\n testId={testId}\n data-analyticsid={AnalyticsId.Expander}\n >\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n {title}\n </Button>\n </div>\n );\n\n const renderContent = (): React.ReactNode => {\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const contentClassName = classNames(\n styles['expander__content'],\n styles[`expander__content--${size}`],\n size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n size === ExpanderSize.large && icon && styles['expander__content--icon'],\n isExpanded && styles['expander__content--expanded'],\n size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line--inner'],\n emphasized && styles['expander__content--emphasized'],\n { [styles['expander__content--sticky']]: isSticky },\n contentClassNames\n );\n const leftBorderClassName = classNames(\n size === ExpanderSize.small && !emphasized && !noNestedLine && styles['expander__content--nested-line--outer']\n );\n\n return (\n <div className={leftBorderClassName}>\n <div className={contentClassName}>{children}</div>\n </div>\n );\n };\n\n return (\n <div className={styles['expander']} ref={expanderRef}>\n {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n {renderContent()}\n </div>\n );\n};\n\nexport default Expander;\n","import Expander from './Expander';\nexport { ExpanderSize } from './constants';\nexport * from './Expander';\nexport default Expander;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Texts if overriding SOT */\n resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n const { resources } = props;\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses(buttonRef);\n\n return (\n <button {...props} className={styles['filter-button']} ref={buttonRef}>\n <span\n className={classNames(styles['filter-button__inner'], {\n [styles['filter-button__inner--hovered']]: isHovered,\n })}\n >\n <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n </span>\n </button>\n );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,cAAc,iBAAiB,SAAS;CAEhD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;YAC1D,qBAAC,QAAD;GACE,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,UAC7C,CAAC;aAHH,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;GAAS,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAW,OAAO;cAAyB,gBAAgB;GAAuB,CAAA,CACpF;;CACA,CAAA;AAEZ;;;AC5CA,IAAA,uBAAe"}
1
+ {"version":3,"file":"FilterButton.js","names":[],"sources":["../src/components/Filter/FilterButton/FilterButton.tsx","../src/components/Filter/FilterButton/index.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport Filter from '../../Icons/Filter';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Texts if overriding SOT */\n resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButton: React.FC<FilterButtonProps> = props => {\n const { resources } = props;\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses(buttonRef);\n\n return (\n <button {...props} className={styles['filter-button']} ref={buttonRef}>\n <span\n className={classNames(styles['filter-button__inner'], {\n [styles['filter-button__inner--hovered']]: isHovered,\n })}\n >\n <Icon svgIcon={Filter} isHovered={isHovered} size={IconSize.XSmall} />\n <span className={styles['filter-button__text']}>{mergedResources.filterButtonText}</span>\n </span>\n </button>\n );\n};\n\nexport default FilterButton;\n","import FilterButton from './FilterButton';\nexport * from './FilterButton';\nexport default FilterButton;\n"],"mappings":";;;;;;;;;;;AAoBA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,cAAc;CAEtB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,cAAc,iBAAiB,SAAS;CAEhD,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAO,WAAW,OAAO;EAAkB,KAAK;EAC1D,UAAA,qBAAC,QAAD;GACE,WAAW,WAAW,OAAO,yBAAyB,GACnD,OAAO,mCAAmC,UAC7C,CAAC;GAHH,UAAA,CAKE,oBAAC,cAAD;IAAM,SAAS;IAAmB;IAAW,MAAM,SAAS;GAAS,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAyB,UAAA,gBAAgB;GAAuB,CAAA,CACpF;;CACA,CAAA;AAEZ;;;AC5CA,IAAA,uBAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n /** FilterButton content area */\n filterButtonComponent: React.ReactNode;\n /** Content area for rendering filter chips */\n filterChips: React.ReactNode[];\n /** test id that is placed on the wrapper */\n testId?: string;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({\n filterButtonComponent,\n filterChips,\n testId,\n resources,\n}) => {\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n return (\n <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n {filterButtonComponent}\n <ul aria-label={mergedResources.activeFiltersListLabel} className={styles['filter-chip-bar__list']}>\n {filterChips.map((activefilter, index) => (\n <li key={index}>{activefilter}</li>\n ))}\n </ul>\n </div>\n );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;;;;AAuBA,IAAM,+BAA2E,EAC/E,uBACA,aACA,QACA,gBACI;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;YAApE,CACG,uBACD,oBAAC,MAAD;GAAI,cAAY,gBAAgB;GAAwB,WAAW,OAAO;aACvE,YAAY,KAAK,cAAc,UAC9B,oBAAC,MAAD,EAAA,UAAiB,aAAiB,GAAzB,KAAyB,CACnC;EACC,CAAA,CACD;;AAET;;;AC5CA,IAAA,sCAAe"}
1
+ {"version":3,"file":"FilterButtonAndChipsWrapper.js","names":[],"sources":["../src/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.tsx","../src/components/Filter/FilterButtonAndChipsWrapper/index.ts"],"sourcesContent":["import type React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterButtonAndChipsWrapperProps {\n /** FilterButton content area */\n filterButtonComponent: React.ReactNode;\n /** Content area for rendering filter chips */\n filterChips: React.ReactNode[];\n /** test id that is placed on the wrapper */\n testId?: string;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemFilter>;\n}\n\nconst FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps> = ({\n filterButtonComponent,\n filterChips,\n testId,\n resources,\n}) => {\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n return (\n <div className={classNames(styles['filter-chip-bar'])} data-testid={testId}>\n {filterButtonComponent}\n <ul aria-label={mergedResources.activeFiltersListLabel} className={styles['filter-chip-bar__list']}>\n {filterChips.map((activefilter, index) => (\n <li key={index}>{activefilter}</li>\n ))}\n </ul>\n </div>\n );\n};\n\nexport default FilterButtonAndChipsWrapper;\n","import FilterButtonAndChipsWrapper from './FilterButtonAndChipsWrapper';\nexport * from './FilterButtonAndChipsWrapper';\nexport default FilterButtonAndChipsWrapper;\n"],"mappings":";;;;;;;AAuBA,IAAM,+BAA2E,EAC/E,uBACA,aACA,QACA,gBACI;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,kBAAkB;EAAG,eAAa;EAApE,UAAA,CACG,uBACD,oBAAC,MAAD;GAAI,cAAY,gBAAgB;GAAwB,WAAW,OAAO;GACvE,UAAA,YAAY,KAAK,cAAc,UAC9B,oBAAC,MAAD,EAAA,UAAiB,aAAiB,GAAzB,KAAyB,CACnC;EACC,CAAA,CACD;;AAET;;;AC5CA,IAAA,sCAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"FilterDrawer.js","names":[],"sources":["../src/components/Filter/FilterDrawer/FilterDrawer.tsx","../src/components/Filter/FilterDrawer/index.ts"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { UseFilterDrawerReturn } from '../useFilterDrawer';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { formatResource } from '../../../utils/resource';\nimport Button from '../../Button';\nimport DrawerNavigation, { type DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';\nimport LoaderSpinner from '../LoaderSpinner/LoaderSpinner';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterDrawerProps<ViewId extends string = string> {\n /** The drawer state from useFilterDrawer */\n drawer: UseFilterDrawerReturn<ViewId>;\n /** Additional callback when the drawer closes (drawer.close() is always called automatically) */\n onClose?: () => void;\n /** Fully custom footer — overrides the default footer built from onReset/resultText */\n footer?: React.ReactNode;\n /** Shows LoaderSpinner in the footer when turned on */\n isLoading?: boolean;\n /** If provided, shows a \"Nullstill filter\" button in the default footer */\n onReset?: () => void;\n /** If provided, shows a result count in the footer */\n resultCount?: number;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemFilter>;\n /** DrawerNavigation.View children defining the overview and filter views */\n children: React.ReactNode;\n}\n\nexport interface FilterDrawerViewProps extends DrawerViewProps {\n /** Hide reset button for view */\n noResetButton?: boolean;\n /** View specific close handler */\n onClose?: () => void;\n /** View specific reset handler */\n onReset?: () => void;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View\n * with id=\"overview\" and home=true.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode {\n return null;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode {\n // DrawerView is never rendered directly — DrawerNavigation reads its props\n return null;\n}\n\nfunction FilterDrawer<ViewId extends string>({\n drawer,\n onClose,\n footer,\n isLoading,\n onReset,\n resultCount,\n resources,\n children,\n}: FilterDrawerProps<ViewId>): React.ReactNode {\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const handleClose = (): void => {\n if (onClose) {\n onClose();\n } else {\n drawer.close();\n }\n };\n\n const defaultResetButton = onReset && (\n <Button onClick={onReset} variant=\"borderless\">\n {mergedResources.resetButtonText}\n </Button>\n );\n const defaultShowResultsButton = <Button onClick={handleClose}>{mergedResources.showButtonText}</Button>;\n\n const resultText = resultCount !== undefined ? <span>{formatResource(mergedResources.resultsText, resultCount)}</span> : undefined;\n const resultContent = isLoading ? <LoaderSpinner resources={mergedResources} /> : resultText;\n\n const defaultFooterRight = (resultContent || defaultShowResultsButton) && (\n <div className={styles['filter-drawer__footer__right']}>\n {resultContent}\n {defaultShowResultsButton}\n </div>\n );\n\n const defaultFooter =\n onReset || resultContent ? (\n <div className={styles['filter-drawer__footer']}>\n {defaultResetButton}\n {defaultFooterRight}\n </div>\n ) : undefined;\n\n const fallbackFooter = footer ?? defaultFooter;\n\n const generateViewFooter = (viewOnReset?: () => void, viewOnClose?: () => void, noResetButton?: boolean): React.ReactNode => {\n if (!viewOnReset && !viewOnClose && !noResetButton) {\n return undefined;\n }\n\n const viewShowButton = viewOnClose ? <Button onClick={viewOnClose}>{mergedResources.showButtonText}</Button> : defaultShowResultsButton;\n\n return (\n <div className={styles['filter-drawer__footer']}>\n {!noResetButton &&\n (viewOnReset ? (\n <Button onClick={viewOnReset} variant=\"borderless\">\n {mergedResources.resetButtonText}\n </Button>\n ) : (\n defaultResetButton\n ))}\n {(resultContent || viewShowButton) && (\n <div className={styles['filter-drawer__footer__right']}>\n {resultContent}\n {viewShowButton}\n </div>\n )}\n </div>\n );\n };\n\n const processedChildren = Children.map(children, child => {\n if (isValidElement<Omit<FilterDrawerViewProps, 'id' | 'home'>>(child) && child.type === FilterDrawerOverview) {\n const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n return <DrawerNavigation.View id=\"overview\" home title={child.props.title} children={child.props.children} footer={viewFooter} />;\n }\n if (isValidElement<FilterDrawerViewProps>(child)) {\n const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n return <DrawerNavigation.View id={child.props.id} title={child.props.title} children={child.props.children} footer={viewFooter} />;\n } else {\n return child;\n }\n });\n\n return (\n <DrawerNavigation isOpen={drawer.isOpen} initialView={drawer.initialView} onCloseButton={handleClose} footer={footer ?? defaultFooter}>\n {processedChildren}\n </DrawerNavigation>\n );\n}\n\nFilterDrawer.Overview = FilterDrawerOverview;\nFilterDrawer.View = FilterDrawerView;\n\nexport default FilterDrawer;\n","import FilterDrawer from './FilterDrawer';\nexport * from './FilterDrawer';\nexport default FilterDrawer;\n"],"mappings":";;;;;;;;;;;;;;;AAgDA,SAAS,qBAAqB,QAA+D;CAC3F,OAAO;AACT;;;;AAMA,SAAS,iBAAiB,QAAgD;CAExE,OAAO;AACT;AAEA,SAAS,aAAoC,EAC3C,QACA,SACA,QACA,WACA,SACA,aACA,WACA,YAC6C;CAC7C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CAEA,MAAM,oBAA0B;EAC9B,IAAI,SACF,QAAQ;OAER,OAAO,MAAM;CAEjB;CAEA,MAAM,qBAAqB,WACzB,oBAAC,gBAAD;EAAQ,SAAS;EAAS,SAAQ;YAC/B,gBAAgB;CACX,CAAA;CAEV,MAAM,2BAA2B,oBAAC,gBAAD;EAAQ,SAAS;YAAc,gBAAgB;CAAuB,CAAA;CAEvG,MAAM,aAAa,gBAAgB,KAAA,IAAY,oBAAC,QAAD,EAAA,UAAO,eAAe,gBAAgB,aAAa,WAAW,EAAQ,CAAA,IAAI,KAAA;CACzH,MAAM,gBAAgB,YAAY,oBAAC,eAAD,EAAe,WAAW,gBAAkB,CAAA,IAAI;CAElF,MAAM,sBAAsB,iBAAiB,6BAC3C,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,eACA,wBACE;;CAGP,MAAM,gBACJ,WAAW,gBACT,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACG,oBACA,kBACE;MACH,KAAA;CAEN,MAAM,iBAAiB,UAAU;CAEjC,MAAM,sBAAsB,aAA0B,aAA0B,kBAA6C;EAC3H,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eACnC;EAGF,MAAM,iBAAiB,cAAc,oBAAC,gBAAD;GAAQ,SAAS;aAAc,gBAAgB;EAAuB,CAAA,IAAI;EAE/G,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACG,CAAC,kBACC,cACC,oBAAC,gBAAD;IAAQ,SAAS;IAAa,SAAQ;cACnC,gBAAgB;GACX,CAAA,IAER,sBAEF,iBAAiB,mBACjB,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,eACA,cACE;KAEJ;;CAET;CAEA,MAAM,oBAAoB,SAAS,IAAI,WAAU,UAAS;EACxD,IAAI,eAA2D,KAAK,KAAK,MAAM,SAAS,sBAAsB;GAE5G,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OAAO,oBAAC,iBAAiB,MAAlB;IAAuB,IAAG;IAAW,MAAA;IAAK,OAAO,MAAM,MAAM;IAAO,UAAU,MAAM,MAAM;IAAU,QAAQ;GAAa,CAAA;EAClI;EACA,IAAI,eAAsC,KAAK,GAAG;GAEhD,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OAAO,oBAAC,iBAAiB,MAAlB;IAAuB,IAAI,MAAM,MAAM;IAAI,OAAO,MAAM,MAAM;IAAO,UAAU,MAAM,MAAM;IAAU,QAAQ;GAAa,CAAA;EACnI,OACE,OAAO;CAEX,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,QAAQ,OAAO;EAAQ,aAAa,OAAO;EAAa,eAAe;EAAa,QAAQ,UAAU;YACrH;CACe,CAAA;AAEtB;AAEA,aAAa,WAAW;AACxB,aAAa,OAAO;;;ACjKpB,IAAA,uBAAe"}
1
+ {"version":3,"file":"FilterDrawer.js","names":[],"sources":["../src/components/Filter/FilterDrawer/FilterDrawer.tsx","../src/components/Filter/FilterDrawer/index.ts"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\nimport type { UseFilterDrawerReturn } from '../useFilterDrawer';\n\nimport { LanguageLocales } from '../../../constants';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { formatResource } from '../../../utils/resource';\nimport Button from '../../Button';\nimport DrawerNavigation, { type DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';\nimport LoaderSpinner from '../LoaderSpinner/LoaderSpinner';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterDrawerProps<ViewId extends string = string> {\n /** The drawer state from useFilterDrawer */\n drawer: UseFilterDrawerReturn<ViewId>;\n /** Additional callback when the drawer closes (drawer.close() is always called automatically) */\n onClose?: () => void;\n /** Fully custom footer — overrides the default footer built from onReset/resultText */\n footer?: React.ReactNode;\n /** Shows LoaderSpinner in the footer when turned on */\n isLoading?: boolean;\n /** If provided, shows a \"Nullstill filter\" button in the default footer */\n onReset?: () => void;\n /** If provided, shows a result count in the footer */\n resultCount?: number;\n /** Resources for the component */\n resources?: Partial<HNDesignsystemFilter>;\n /** DrawerNavigation.View children defining the overview and filter views */\n children: React.ReactNode;\n}\n\nexport interface FilterDrawerViewProps extends DrawerViewProps {\n /** Hide reset button for view */\n noResetButton?: boolean;\n /** View specific close handler */\n onClose?: () => void;\n /** View specific reset handler */\n onReset?: () => void;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View\n * with id=\"overview\" and home=true.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode {\n return null;\n}\n\n/**\n * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode {\n // DrawerView is never rendered directly — DrawerNavigation reads its props\n return null;\n}\n\nfunction FilterDrawer<ViewId extends string>({\n drawer,\n onClose,\n footer,\n isLoading,\n onReset,\n resultCount,\n resources,\n children,\n}: FilterDrawerProps<ViewId>): React.ReactNode {\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const handleClose = (): void => {\n if (onClose) {\n onClose();\n } else {\n drawer.close();\n }\n };\n\n const defaultResetButton = onReset && (\n <Button onClick={onReset} variant=\"borderless\">\n {mergedResources.resetButtonText}\n </Button>\n );\n const defaultShowResultsButton = <Button onClick={handleClose}>{mergedResources.showButtonText}</Button>;\n\n const resultText = resultCount !== undefined ? <span>{formatResource(mergedResources.resultsText, resultCount)}</span> : undefined;\n const resultContent = isLoading ? <LoaderSpinner resources={mergedResources} /> : resultText;\n\n const defaultFooterRight = (resultContent || defaultShowResultsButton) && (\n <div className={styles['filter-drawer__footer__right']}>\n {resultContent}\n {defaultShowResultsButton}\n </div>\n );\n\n const defaultFooter =\n onReset || resultContent ? (\n <div className={styles['filter-drawer__footer']}>\n {defaultResetButton}\n {defaultFooterRight}\n </div>\n ) : undefined;\n\n const fallbackFooter = footer ?? defaultFooter;\n\n const generateViewFooter = (viewOnReset?: () => void, viewOnClose?: () => void, noResetButton?: boolean): React.ReactNode => {\n if (!viewOnReset && !viewOnClose && !noResetButton) {\n return undefined;\n }\n\n const viewShowButton = viewOnClose ? <Button onClick={viewOnClose}>{mergedResources.showButtonText}</Button> : defaultShowResultsButton;\n\n return (\n <div className={styles['filter-drawer__footer']}>\n {!noResetButton &&\n (viewOnReset ? (\n <Button onClick={viewOnReset} variant=\"borderless\">\n {mergedResources.resetButtonText}\n </Button>\n ) : (\n defaultResetButton\n ))}\n {(resultContent || viewShowButton) && (\n <div className={styles['filter-drawer__footer__right']}>\n {resultContent}\n {viewShowButton}\n </div>\n )}\n </div>\n );\n };\n\n const processedChildren = Children.map(children, child => {\n if (isValidElement<Omit<FilterDrawerViewProps, 'id' | 'home'>>(child) && child.type === FilterDrawerOverview) {\n const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n return <DrawerNavigation.View id=\"overview\" home title={child.props.title} children={child.props.children} footer={viewFooter} />;\n }\n if (isValidElement<FilterDrawerViewProps>(child)) {\n const viewDefaultFooter = generateViewFooter(child.props.onReset, child.props.onClose, child.props.noResetButton);\n const viewFooter = viewDefaultFooter ?? child.props.footer ?? fallbackFooter;\n return <DrawerNavigation.View id={child.props.id} title={child.props.title} children={child.props.children} footer={viewFooter} />;\n } else {\n return child;\n }\n });\n\n return (\n <DrawerNavigation isOpen={drawer.isOpen} initialView={drawer.initialView} onCloseButton={handleClose} footer={footer ?? defaultFooter}>\n {processedChildren}\n </DrawerNavigation>\n );\n}\n\nFilterDrawer.Overview = FilterDrawerOverview;\nFilterDrawer.View = FilterDrawerView;\n\nexport default FilterDrawer;\n","import FilterDrawer from './FilterDrawer';\nexport * from './FilterDrawer';\nexport default FilterDrawer;\n"],"mappings":";;;;;;;;;;;;;;;AAgDA,SAAS,qBAAqB,QAA+D;CAC3F,OAAO;AACT;;;;AAMA,SAAS,iBAAiB,QAAgD;CAExE,OAAO;AACT;AAEA,SAAS,aAAoC,EAC3C,QACA,SACA,QACA,WACA,SACA,aACA,WACA,YAC6C;CAC7C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CAEA,MAAM,oBAA0B;EAC9B,IAAI,SACF,QAAQ;OAER,OAAO,MAAM;CAEjB;CAEA,MAAM,qBAAqB,WACzB,oBAAC,gBAAD;EAAQ,SAAS;EAAS,SAAQ;EAC/B,UAAA,gBAAgB;CACX,CAAA;CAEV,MAAM,2BAA2B,oBAAC,gBAAD;EAAQ,SAAS;EAAc,UAAA,gBAAgB;CAAuB,CAAA;CAEvG,MAAM,aAAa,gBAAgB,KAAA,IAAY,oBAAC,QAAD,EAAA,UAAO,eAAe,gBAAgB,aAAa,WAAW,EAAQ,CAAA,IAAI,KAAA;CACzH,MAAM,gBAAgB,YAAY,oBAAC,eAAD,EAAe,WAAW,gBAAkB,CAAA,IAAI;CAElF,MAAM,sBAAsB,iBAAiB,6BAC3C,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,eACA,wBACE;;CAGP,MAAM,gBACJ,WAAW,gBACT,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,oBACA,kBACE;CACH,CAAA,IAAA,KAAA;CAEN,MAAM,iBAAiB,UAAU;CAEjC,MAAM,sBAAsB,aAA0B,aAA0B,kBAA6C;EAC3H,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,eACnC;EAGF,MAAM,iBAAiB,cAAc,oBAAC,gBAAD;GAAQ,SAAS;GAAc,UAAA,gBAAgB;EAAuB,CAAA,IAAI;EAE/G,OACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACG,CAAC,kBACC,cACC,oBAAC,gBAAD;IAAQ,SAAS;IAAa,SAAQ;IACnC,UAAA,gBAAgB;GACX,CAAA,IAER,sBAEF,iBAAiB,mBACjB,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,eACA,cACE;GAEJ,CAAA,CAAA;;CAET;CAEA,MAAM,oBAAoB,SAAS,IAAI,WAAU,UAAS;EACxD,IAAI,eAA2D,KAAK,KAAK,MAAM,SAAS,sBAAsB;GAE5G,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OAAO,oBAAC,iBAAiB,MAAlB;IAAuB,IAAG;IAAW,MAAA;IAAK,OAAO,MAAM,MAAM;IAAO,UAAU,MAAM,MAAM;IAAU,QAAQ;GAAa,CAAA;EAClI;EACA,IAAI,eAAsC,KAAK,GAAG;GAEhD,MAAM,aADoB,mBAAmB,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,aAChF,KAAqB,MAAM,MAAM,UAAU;GAC9D,OAAO,oBAAC,iBAAiB,MAAlB;IAAuB,IAAI,MAAM,MAAM;IAAI,OAAO,MAAM,MAAM;IAAO,UAAU,MAAM,MAAM;IAAU,QAAQ;GAAa,CAAA;EACnI,OACE,OAAO;CAEX,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,QAAQ,OAAO;EAAQ,aAAa,OAAO;EAAa,eAAe;EAAa,QAAQ,UAAU;EACrH,UAAA;CACe,CAAA;AAEtB;AAEA,aAAa,WAAW;AACxB,aAAa,OAAO;;;ACjKpB,IAAA,uBAAe"}
@@ -43,9 +43,10 @@ var Link = (props) => {
43
43
  };
44
44
  var LinkListComponent = (props) => {
45
45
  const { children, className = "", testId, ref } = props;
46
+ const listClassNames = classNames(styles["link-list"], className);
46
47
  return /* @__PURE__ */ jsx("ul", {
47
48
  ref,
48
- className: classNames(styles["link-list"], className),
49
+ className: listClassNames,
49
50
  "data-testid": testId,
50
51
  "data-analyticsid": AnalyticsId.LinkList,
51
52
  children: React.Children.map(children, (child) => {
@@ -1 +1 @@
1
- {"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n Link: LinkType;\n}\n\nexport interface LinkListProps {\n /** Items in the LinkList */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the ul element */\n ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n {\n /** If needed children will be content instead of title and chips. Use only in edge cases */\n children?: React.ReactNode;\n /** Title text on link element */\n title?: string;\n /** Texts rendered inside non-interactive chips on link element */\n chips?: string[];\n /** Aria label for the list of chips */\n chipsGroupAriaLabel?: string;\n /** Custom classname for link element */\n className?: string;\n /** Ref for button */\n linkRef?: React.RefObject<HTMLButtonElement | null>;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the list item element */\n ref?: React.Ref<HTMLLIElement | null>;\n }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n const liClasses = cn(styles['link-list__item']);\n const linkClasses = cn(styles['link-list__button'], className);\n\n return (\n <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n <div className={styles['link-list__button__content']}>\n {title ? (\n <>\n <span>{title}</span>\n {chips && chips.length > 0 && (\n <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n {chips.map(chip => (\n <li className={styles['link-list__chip']} key={chip}>\n {chip}\n </li>\n ))}\n </ul>\n )}\n </>\n ) : (\n <>{children}</>\n )}\n </div>\n <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n </button>\n </li>\n );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n const { children, className = '', testId, ref } = props;\n\n const listClassNames = cn(styles['link-list'], className);\n\n return (\n <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n {React.Children.map(children, (child: React.ReactNode) => {\n if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n return React.cloneElement(child);\n }\n })}\n </ul>\n );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAoDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,OAAO;CAEnF,MAAM,YAAY,WAAG,OAAO,kBAAkB;CAC9C,MAAM,cAAc,WAAG,OAAO,sBAAsB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACrF,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;aAAxG,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;cACpB,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;eAC9D,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;gBACnB;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAAyC,CAAA,CACpH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAIlD,OACE,oBAAC,MAAD;EAAS;EAAK,WAHO,WAAG,OAAO,cAAc,SAGpB;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,KAAK;EAEnC,CAAC;CACC,CAAA;AAER;AAEA,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}
1
+ {"version":3,"file":"FilterLinkList.js","names":[],"sources":["../src/components/Filter/FilterLinkList/FilterLinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../../constants';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon from '../../Icon';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './FilterLinkList.module.scss';\n\nexport type LinkType = React.FC<LinkProps>;\n\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n Link: LinkType;\n}\n\nexport interface LinkListProps {\n /** Items in the LinkList */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the ul element */\n ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n {\n /** If needed children will be content instead of title and chips. Use only in edge cases */\n children?: React.ReactNode;\n /** Title text on link element */\n title?: string;\n /** Texts rendered inside non-interactive chips on link element */\n chips?: string[];\n /** Aria label for the list of chips */\n chipsGroupAriaLabel?: string;\n /** Custom classname for link element */\n className?: string;\n /** Ref for button */\n linkRef?: React.RefObject<HTMLButtonElement | null>;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the list item element */\n ref?: React.Ref<HTMLLIElement | null>;\n }\n>;\n\nexport const Link: LinkType = (props: LinkProps) => {\n const { children, title, chips, className = '', linkRef, testId, ref, ...restProps } = props;\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | null>(linkRef);\n\n const liClasses = cn(styles['link-list__item']);\n const linkClasses = cn(styles['link-list__button'], className);\n\n return (\n <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n <div className={styles['link-list__button__content']}>\n {title ? (\n <>\n <span>{title}</span>\n {chips && chips.length > 0 && (\n <ul className={styles['link-list__chip-list']} aria-label={props.chipsGroupAriaLabel}>\n {chips.map(chip => (\n <li className={styles['link-list__chip']} key={chip}>\n {chip}\n </li>\n ))}\n </ul>\n )}\n </>\n ) : (\n <>{children}</>\n )}\n </div>\n <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} color={'var(--color-action-graphics-onlight)'} />\n </button>\n </li>\n );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n const { children, className = '', testId, ref } = props;\n\n const listClassNames = cn(styles['link-list'], className);\n\n return (\n <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n {React.Children.map(children, (child: React.ReactNode) => {\n if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n return React.cloneElement(child);\n }\n })}\n </ul>\n );\n};\n\nexport const FilterLinkList = LinkListComponent as CompoundComponent;\n\nFilterLinkList.displayName = 'FilterLinkList';\nFilterLinkList.Link = Link;\nLink.displayName = 'FilterLinkList.Link';\n\nexport default FilterLinkList;\n"],"mappings":";;;;;;;;;AAoDA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EAAE,UAAU,OAAO,OAAO,YAAY,IAAI,SAAS,QAAQ,KAAK,GAAG,cAAc;CACvF,MAAM,EAAE,WAAW,cAAc,iBAA2C,OAAO;CAEnF,MAAM,YAAY,WAAG,OAAO,kBAAkB;CAC9C,MAAM,cAAc,WAAG,OAAO,sBAAsB,SAAS;CAE7D,OACE,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EACrF,UAAA,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;GAAxG,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IACpB,UAAA,QACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,SAAS,MAAM,SAAS,KACvB,oBAAC,MAAD;KAAI,WAAW,OAAO;KAAyB,cAAY,MAAM;KAC9D,UAAA,MAAM,KAAI,SACT,oBAAC,MAAD;MAAI,WAAW,OAAO;MACnB,UAAA;KACC,GAF2C,IAE3C,CACL;IACC,CAAA,CAEN,EAAA,CAAA,IAEF,oBAAA,UAAA,EAAG,SAAW,CAAA;GAEb,CAAA,GACL,oBAAC,cAAD;IAAM,SAAS;IAAyB;IAAW,MAAM,SAAS;IAAQ,OAAO;GAAyC,CAAA,CACpH;;CACN,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EAAE,UAAU,YAAY,IAAI,QAAQ,QAAQ;CAElD,MAAM,iBAAiB,WAAG,OAAO,cAAc,SAAS;CAExD,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;EACzF,UAAA,MAAM,SAAS,IAAI,WAAW,UAA2B;GACxD,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAC3D,OAAO,MAAM,aAAa,KAAK;EAEnC,CAAC;CACC,CAAA;AAER;AAEA,IAAa,iBAAiB;AAE9B,eAAe,cAAc;AAC7B,eAAe,OAAO;AACtB,KAAK,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n /** Adds custom classes to the wrapper element. */\n wrapperClassName?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n return (\n <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n <FilterSearch {...filterSearchProps} />\n </div>\n );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,WAAG,OAAO,2BAA2B,gBAAgB;EAAG,eAAa;YACnF,oBAAC,cAAD,EAAc,GAAI,kBAAoB,CAAA;CACnC,CAAA;AAET;;;ACrBA,IAAA,+BAAe"}
1
+ {"version":3,"file":"FilterOverviewSearch.js","names":[],"sources":["../src/components/Filter/FilterOverviewSearch/FilterOverviewSearch.tsx","../src/components/Filter/FilterOverviewSearch/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { FilterSearchProps } from '../FilterSearch/FilterSearch';\n\nimport FilterSearch from '../FilterSearch/FilterSearch';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterOverviewSearchProps extends FilterSearchProps {\n /** Adds custom classes to the wrapper element. */\n wrapperClassName?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst FilterOverviewSearch: React.FC<FilterOverviewSearchProps> = props => {\n const { wrapperClassName, testId, ...filterSearchProps } = props;\n\n return (\n <div className={cn(styles['filter-overview-search'], wrapperClassName)} data-testid={testId}>\n <FilterSearch {...filterSearchProps} />\n </div>\n );\n};\n\nexport default FilterOverviewSearch;\n","import FilterOverviewSearch from './FilterOverviewSearch';\nexport * from './FilterOverviewSearch';\nexport default FilterOverviewSearch;\n"],"mappings":";;;;;AAeA,IAAM,wBAA4D,UAAS;CACzE,MAAM,EAAE,kBAAkB,QAAQ,GAAG,sBAAsB;CAE3D,OACE,oBAAC,OAAD;EAAK,WAAW,WAAG,OAAO,2BAA2B,gBAAgB;EAAG,eAAa;EACnF,UAAA,oBAAC,cAAD,EAAc,GAAI,kBAAoB,CAAA;CACnC,CAAA;AAET;;;ACrBA,IAAA,+BAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"FilterResultCountAndSortWrapper.js","names":[],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n /** Result count content area */\n resultCount?: React.ReactNode;\n /** FilterSort content area */\n sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n const { resultCount, sortComponent } = props;\n\n return (\n <div className={styles['filter-result-count-and-sort-wrapper']}>\n <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n </div>\n );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;;AASA,IAAM,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAiD;EAAkB,CAAA,GAC3F,oBAAC,QAAD;GAAM,WAAW,OAAO;aAAgD;EAAoB,CAAA,CACzF;;AAET;;;AChBA,IAAA,0CAAe"}
1
+ {"version":3,"file":"FilterResultCountAndSortWrapper.js","names":[],"sources":["../src/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.tsx","../src/components/Filter/FilterResultCountAndSortWrapper/index.ts"],"sourcesContent":["import styles from './styles.module.scss';\n\nexport interface FilterResultCountAndSortWrapper {\n /** Result count content area */\n resultCount?: React.ReactNode;\n /** FilterSort content area */\n sortComponent?: React.ReactNode;\n}\n\nconst FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper> = props => {\n const { resultCount, sortComponent } = props;\n\n return (\n <div className={styles['filter-result-count-and-sort-wrapper']}>\n <span className={styles['filter-result-count-and-sort-wrapper__count']}>{resultCount}</span>\n <span className={styles['filter-result-count-and-sort-wrapper__sort']}>{sortComponent}</span>\n </div>\n );\n};\n\nexport default FilterResultCountAndSortWrapper;\n","import FilterResultCountAndSortWrapper from './FilterResultCountAndSortWrapper';\nexport * from './FilterResultCountAndSortWrapper';\nexport default FilterResultCountAndSortWrapper;\n"],"mappings":";;;AASA,IAAM,mCAA6E,UAAS;CAC1F,MAAM,EAAE,aAAa,kBAAkB;CAEvC,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAiD,UAAA;EAAkB,CAAA,GAC3F,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAgD,UAAA;EAAoB,CAAA,CACzF;;AAET;;;AChBA,IAAA,0CAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"FilterSearch.js","names":[],"sources":["../src/components/Filter/FilterSearch/FilterSearch.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../../utils/refs';\nimport Icon from '../../Icon';\nimport Search from '../../Icons/Search';\nimport X from '../../Icons/X';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'onChange'> {\n /** Adds custom classes to the component */\n className?: string;\n /** The value given by the user in the input field */\n value: string | undefined;\n /** onChange handler for the input field */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /** Props for the search button */\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** Props for the clear button */\n clearButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** Texts if overriding SOT */\n resources?: Partial<HNDesignsystemFilter>;\n /** Ref passed to the input element */\n ref?: React.Ref<HTMLInputElement | null>;\n /** If the input field should have a separate search/submit button or not */\n withSearchButton?: boolean;\n}\n\nconst FilterSearch: React.FC<FilterSearchProps> = props => {\n const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, withSearchButton = false, ...inputProps } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const inputWrapperRef = useRef<HTMLLabelElement>(null);\n const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { isHovered: isButtonHovered } = usePseudoClasses(buttonRef);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n const { isHovered: isClearButtonHovered } = usePseudoClasses(clearButtonRef);\n\n const isMobile = useIsMobileBreakpoint();\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const inputHasValue = !!value;\n\n return (\n <div className={classNames(styles['filter-search__wrapper'], className)}>\n <label className={styles['filter-search__input-wrapper']} ref={inputWrapperRef}>\n <span className={styles['filter-search__input__label']}>{inputProps['aria-label'] ?? mergedResources.searchPlaceholder}</span>\n <div className={styles['filter-search__input__icon']}>\n {!withSearchButton && <Icon svgIcon={Search} size={isMobile ? IconSize.XXSmall : IconSize.XSmall} />}\n </div>\n <input\n {...inputProps}\n ref={mergeRefs([inputRef, ref])}\n value={value}\n onChange={onChange}\n className={classNames(styles['filter-search__input'], {\n [styles['filter-search__input--hovered']]: isWrapperHovered,\n [styles['filter-search__input--with-search-button']]: withSearchButton,\n })}\n placeholder={mergedResources.searchPlaceholder}\n />\n </label>\n {inputHasValue && (\n <button\n type=\"button\"\n aria-label={mergedResources.searchClearButtonAriaLabel}\n disabled={inputProps.disabled}\n {...clearButtonProps}\n onClick={e => {\n clearButtonProps?.onClick?.(e);\n inputRef.current?.focus();\n }}\n ref={clearButtonRef}\n className={classNames(styles['filter-search__clear-button'], clearButtonProps?.className)}\n >\n <Icon svgIcon={X} size={IconSize.XXSmall} isHovered={!isMobile && isClearButtonHovered} />\n </button>\n )}\n {withSearchButton && (\n <button\n type={'button'}\n aria-label={mergedResources.searchButtonAriaLabel}\n disabled={inputProps.disabled}\n {...buttonProps}\n ref={buttonRef}\n className={classNames(styles['filter-search__search-button'], buttonProps?.className)}\n >\n <div className={classNames(styles['filter-search__search-button--inner'])}>\n <Icon\n svgIcon={Search}\n size={isMobile ? IconSize.XXSmall : IconSize.XSmall}\n isHovered={!inputProps.disabled && isButtonHovered}\n />\n </div>\n </button>\n )}\n </div>\n );\n};\n\nexport default FilterSearch;\n"],"mappings":";;;;;;;;;;;;;;AAqCA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,WAAW,OAAO,UAAU,WAAW,aAAa,kBAAkB,KAAK,mBAAmB,OAAO,GAAG,eAAe;CAE/H,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,EAAE,WAAW,qBAAqB,iBAAiB,eAAe;CACxE,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,WAAW,oBAAoB,iBAAiB,SAAS;CACjE,MAAM,iBAAiB,OAA0B,IAAI;CACrD,MAAM,EAAE,WAAW,yBAAyB,iBAAiB,cAAc;CAE3E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,gBAAgB,CAAC,CAAC;CAExB,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,2BAA2B,SAAS;YAAtE;GACE,qBAAC,SAAD;IAAO,WAAW,OAAO;IAAiC,KAAK;cAA/D;KACE,oBAAC,QAAD;MAAM,WAAW,OAAO;gBAAiC,WAAW,iBAAiB,gBAAgB;KAAwB,CAAA;KAC7H,oBAAC,OAAD;MAAK,WAAW,OAAO;gBACpB,CAAC,oBAAoB,oBAAC,cAAD;OAAM,SAAS;OAAQ,MAAM,WAAW,SAAS,UAAU,SAAS;MAAS,CAAA;KAChG,CAAA;KACL,oBAAC,SAAD;MACE,GAAI;MACJ,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;MACvB;MACG;MACV,WAAW,WAAW,OAAO,yBAAyB;QACnD,OAAO,mCAAmC;QAC1C,OAAO,8CAA8C;MACxD,CAAC;MACD,aAAa,gBAAgB;KAC9B,CAAA;IACI;;GACN,iBACC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,UAAS,MAAK;KACZ,kBAAkB,UAAU,CAAC;KAC7B,SAAS,SAAS,MAAM;IAC1B;IACA,KAAK;IACL,WAAW,WAAW,OAAO,gCAAgC,kBAAkB,SAAS;cAExF,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAS,WAAW,CAAC,YAAY;IAAuB,CAAA;GACnF,CAAA;GAET,oBACC,oBAAC,UAAD;IACE,MAAM;IACN,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,KAAK;IACL,WAAW,WAAW,OAAO,iCAAiC,aAAa,SAAS;cAEpF,oBAAC,OAAD;KAAK,WAAW,WAAW,OAAO,sCAAsC;eACtE,oBAAC,cAAD;MACE,SAAS;MACT,MAAM,WAAW,SAAS,UAAU,SAAS;MAC7C,WAAW,CAAC,WAAW,YAAY;KACpC,CAAA;IACE,CAAA;GACC,CAAA;EAEP;;AAET"}
1
+ {"version":3,"file":"FilterSearch.js","names":[],"sources":["../src/components/Filter/FilterSearch/FilterSearch.tsx"],"sourcesContent":["import { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { IconSize, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../../utils/refs';\nimport Icon from '../../Icon';\nimport Search from '../../Icons/Search';\nimport X from '../../Icons/X';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface FilterSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'onChange'> {\n /** Adds custom classes to the component */\n className?: string;\n /** The value given by the user in the input field */\n value: string | undefined;\n /** onChange handler for the input field */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /** Props for the search button */\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** Props for the clear button */\n clearButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n /** Texts if overriding SOT */\n resources?: Partial<HNDesignsystemFilter>;\n /** Ref passed to the input element */\n ref?: React.Ref<HTMLInputElement | null>;\n /** If the input field should have a separate search/submit button or not */\n withSearchButton?: boolean;\n}\n\nconst FilterSearch: React.FC<FilterSearchProps> = props => {\n const { className, value, onChange, resources, buttonProps, clearButtonProps, ref, withSearchButton = false, ...inputProps } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const inputWrapperRef = useRef<HTMLLabelElement>(null);\n const { isHovered: isWrapperHovered } = usePseudoClasses(inputWrapperRef);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { isHovered: isButtonHovered } = usePseudoClasses(buttonRef);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n const { isHovered: isClearButtonHovered } = usePseudoClasses(clearButtonRef);\n\n const isMobile = useIsMobileBreakpoint();\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources = {\n ...defaultResources,\n ...resources,\n };\n\n const inputHasValue = !!value;\n\n return (\n <div className={classNames(styles['filter-search__wrapper'], className)}>\n <label className={styles['filter-search__input-wrapper']} ref={inputWrapperRef}>\n <span className={styles['filter-search__input__label']}>{inputProps['aria-label'] ?? mergedResources.searchPlaceholder}</span>\n <div className={styles['filter-search__input__icon']}>\n {!withSearchButton && <Icon svgIcon={Search} size={isMobile ? IconSize.XXSmall : IconSize.XSmall} />}\n </div>\n <input\n {...inputProps}\n ref={mergeRefs([inputRef, ref])}\n value={value}\n onChange={onChange}\n className={classNames(styles['filter-search__input'], {\n [styles['filter-search__input--hovered']]: isWrapperHovered,\n [styles['filter-search__input--with-search-button']]: withSearchButton,\n })}\n placeholder={mergedResources.searchPlaceholder}\n />\n </label>\n {inputHasValue && (\n <button\n type=\"button\"\n aria-label={mergedResources.searchClearButtonAriaLabel}\n disabled={inputProps.disabled}\n {...clearButtonProps}\n onClick={e => {\n clearButtonProps?.onClick?.(e);\n inputRef.current?.focus();\n }}\n ref={clearButtonRef}\n className={classNames(styles['filter-search__clear-button'], clearButtonProps?.className)}\n >\n <Icon svgIcon={X} size={IconSize.XXSmall} isHovered={!isMobile && isClearButtonHovered} />\n </button>\n )}\n {withSearchButton && (\n <button\n type={'button'}\n aria-label={mergedResources.searchButtonAriaLabel}\n disabled={inputProps.disabled}\n {...buttonProps}\n ref={buttonRef}\n className={classNames(styles['filter-search__search-button'], buttonProps?.className)}\n >\n <div className={classNames(styles['filter-search__search-button--inner'])}>\n <Icon\n svgIcon={Search}\n size={isMobile ? IconSize.XXSmall : IconSize.XSmall}\n isHovered={!inputProps.disabled && isButtonHovered}\n />\n </div>\n </button>\n )}\n </div>\n );\n};\n\nexport default FilterSearch;\n"],"mappings":";;;;;;;;;;;;;;AAqCA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,WAAW,OAAO,UAAU,WAAW,aAAa,kBAAkB,KAAK,mBAAmB,OAAO,GAAG,eAAe;CAE/H,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,EAAE,WAAW,qBAAqB,iBAAiB,eAAe;CACxE,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,EAAE,WAAW,oBAAoB,iBAAiB,SAAS;CACjE,MAAM,iBAAiB,OAA0B,IAAI;CACrD,MAAM,EAAE,WAAW,yBAAyB,iBAAiB,cAAc;CAE3E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAAkB;EACtB,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,gBAAgB,CAAC,CAAC;CAExB,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,2BAA2B,SAAS;EAAtE,UAAA;GACE,qBAAC,SAAD;IAAO,WAAW,OAAO;IAAiC,KAAK;IAA/D,UAAA;KACE,oBAAC,QAAD;MAAM,WAAW,OAAO;MAAiC,UAAA,WAAW,iBAAiB,gBAAgB;KAAwB,CAAA;KAC7H,oBAAC,OAAD;MAAK,WAAW,OAAO;MACpB,UAAA,CAAC,oBAAoB,oBAAC,cAAD;OAAM,SAAS;OAAQ,MAAM,WAAW,SAAS,UAAU,SAAS;MAAS,CAAA;KAChG,CAAA;KACL,oBAAC,SAAD;MACE,GAAI;MACJ,KAAK,UAAU,CAAC,UAAU,GAAG,CAAC;MACvB;MACG;MACV,WAAW,WAAW,OAAO,yBAAyB;QACnD,OAAO,mCAAmC;QAC1C,OAAO,8CAA8C;MACxD,CAAC;MACD,aAAa,gBAAgB;KAC9B,CAAA;IACI;;GACN,iBACC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,UAAS,MAAK;KACZ,kBAAkB,UAAU,CAAC;KAC7B,SAAS,SAAS,MAAM;IAC1B;IACA,KAAK;IACL,WAAW,WAAW,OAAO,gCAAgC,kBAAkB,SAAS;IAExF,UAAA,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAS,WAAW,CAAC,YAAY;IAAuB,CAAA;GACnF,CAAA;GAET,oBACC,oBAAC,UAAD;IACE,MAAM;IACN,cAAY,gBAAgB;IAC5B,UAAU,WAAW;IACrB,GAAI;IACJ,KAAK;IACL,WAAW,WAAW,OAAO,iCAAiC,aAAa,SAAS;IAEpF,UAAA,oBAAC,OAAD;KAAK,WAAW,WAAW,OAAO,sCAAsC;KACtE,UAAA,oBAAC,cAAD;MACE,SAAS;MACT,MAAM,WAAW,SAAS,UAAU,SAAS;MAC7C,WAAW,CAAC,WAAW,YAAY;KACpC,CAAA;IACE,CAAA;GACC,CAAA;EAEP;;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldTag.js","names":[],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n \"allRequired\": \"All fields must be filled out\",\n \"requiredField\": \"Required\",\n \"optional\": \"Optional\",\n \"allOptional\": \"All fields are optional\",\n \"requiredRadiobuttonList\": \"Select one\",\n \"requiredCheckboxList\": \"Select one or more\",\n \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n \"allRequired\": \"Alle felt må fylles ut\",\n \"requiredField\": \"Må fylles ut\",\n \"optional\": \"Valgfritt\",\n \"allOptional\": \"Alle felt er valgfrie\",\n \"requiredRadiobuttonList\": \"Velg én\",\n \"requiredCheckboxList\": \"Velg én eller flere\",\n \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n \"allRequired\": \"Alle felt må fyllast ut\",\n \"requiredField\": \"Må fyllast ut\",\n \"optional\": \"Valfritt\",\n \"allOptional\": \"Alle felt er valfrie\",\n \"requiredRadiobuttonList\": \"Vel éin\",\n \"requiredCheckboxList\": \"Vel éin eller fleire\",\n \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n \"allRequired\": \"Buot sajiid ferte deavdit\",\n \"requiredField\": \"Ferte devdojuvvot\",\n \"optional\": \"Válljenláhkái\",\n \"allOptional\": \"Buot sajit eat válljenláhkái\",\n \"requiredRadiobuttonList\": \"Vállje ovtta\",\n \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.SAMI_NORTHERN:\n return seNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n | 'all-required'\n | 'required-field'\n | 'optional'\n | 'all-optional'\n | 'required-radiobutton-list'\n | 'required-checkbox-list'\n | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n /** Id that is placed on the component */\n id?: string;\n /** What level is the required tag, sets the styling and the text. */\n level: FormFieldTagLevel;\n /** Texts if overriding SOT */\n resources?: Partial<HNDesignsystemFormFieldTag>;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n const { id, level, resources, testId } = props;\n const isOptional = level === 'optional' || level === 'all-optional';\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemFormFieldTag = {\n ...defaultResources,\n ...resources,\n };\n\n const textMap = {\n 'all-required': mergedResources.allRequired,\n 'required-field': mergedResources.requiredField,\n optional: mergedResources.optional,\n 'all-optional': mergedResources.allOptional,\n 'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n 'required-checkbox-list': mergedResources.requiredCheckboxList,\n 'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n };\n\n return (\n <span\n id={id}\n data-testid={testId}\n data-analyticsid={AnalyticsId.FormFieldTag}\n className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n >\n {textMap[level]}\n </span>\n );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,IAAa,gBAAgB,aAA0D;CACrF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACUA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAA8C;EAClD,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;CAC9C;CAEA,OACE,oBAAC,QAAD;EACM;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,WAAW,CAAC;YAEnG,QAAQ;CACL,CAAA;AAEV;;;AC5DA,IAAA,uBAAe"}
1
+ {"version":3,"file":"FormFieldTag.js","names":[],"sources":["../src/resources/HN.Designsystem.FormFieldTag.en-GB.json","../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/resources/HN.Designsystem.FormFieldTag.nn-NO.json","../src/resources/HN.Designsystem.FormFieldTag.se-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n \"allRequired\": \"All fields must be filled out\",\n \"requiredField\": \"Required\",\n \"optional\": \"Optional\",\n \"allOptional\": \"All fields are optional\",\n \"requiredRadiobuttonList\": \"Select one\",\n \"requiredCheckboxList\": \"Select one or more\",\n \"requiredSingleCheckbox\": \"Must be selected\"\n}\n","{\n \"allRequired\": \"Alle felt må fylles ut\",\n \"requiredField\": \"Må fylles ut\",\n \"optional\": \"Valgfritt\",\n \"allOptional\": \"Alle felt er valgfrie\",\n \"requiredRadiobuttonList\": \"Velg én\",\n \"requiredCheckboxList\": \"Velg én eller flere\",\n \"requiredSingleCheckbox\": \"Må velges\"\n}\n","{\n \"allRequired\": \"Alle felt må fyllast ut\",\n \"requiredField\": \"Må fyllast ut\",\n \"optional\": \"Valfritt\",\n \"allOptional\": \"Alle felt er valfrie\",\n \"requiredRadiobuttonList\": \"Vel éin\",\n \"requiredCheckboxList\": \"Vel éin eller fleire\",\n \"requiredSingleCheckbox\": \"Må veljast\"\n}\n","{\n \"allRequired\": \"Buot sajiid ferte deavdit\",\n \"requiredField\": \"Ferte devdojuvvot\",\n \"optional\": \"Válljenláhkái\",\n \"allOptional\": \"Buot sajit eat válljenláhkái\",\n \"requiredRadiobuttonList\": \"Vállje ovtta\",\n \"requiredCheckboxList\": \"Vállje ovtta dahje máŋga\",\n \"requiredSingleCheckbox\": \"Ferte válljejuvvot\"\n}\n","import type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.FormFieldTag.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.FormFieldTag.nn-NO.json';\nimport seNO from '../../resources/HN.Designsystem.FormFieldTag.se-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN_NYNORSK:\n return nnNO;\n case LanguageLocales.SAMI_NORTHERN:\n return seNO;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n | 'all-required'\n | 'required-field'\n | 'optional'\n | 'all-optional'\n | 'required-radiobutton-list'\n | 'required-checkbox-list'\n | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n /** Id that is placed on the component */\n id?: string;\n /** What level is the required tag, sets the styling and the text. */\n level: FormFieldTagLevel;\n /** Texts if overriding SOT */\n resources?: Partial<HNDesignsystemFormFieldTag>;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n const { id, level, resources, testId } = props;\n const isOptional = level === 'optional' || level === 'all-optional';\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemFormFieldTag = {\n ...defaultResources,\n ...resources,\n };\n\n const textMap = {\n 'all-required': mergedResources.allRequired,\n 'required-field': mergedResources.requiredField,\n optional: mergedResources.optional,\n 'all-optional': mergedResources.allOptional,\n 'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n 'required-checkbox-list': mergedResources.requiredCheckboxList,\n 'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n };\n\n return (\n <span\n id={id}\n data-testid={testId}\n data-analyticsid={AnalyticsId.FormFieldTag}\n className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n >\n {textMap[level]}\n </span>\n );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AIQA,IAAa,gBAAgB,aAA0D;CACrF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB,eACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;ACUA,IAAM,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAA8C;EAClD,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;CAC9C;CAEA,OACE,oBAAC,QAAD;EACM;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,WAAW,CAAC;EAEnG,UAAA,QAAQ;CACL,CAAA;AAEV;;;AC5DA,IAAA,uBAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n ariaLabelledBy?: string;\n /** title for the the fieldset */\n title?: string;\n /** text placed in the legend tag of the fieldset */\n legend?: string;\n /** id for the legend tag */\n legendId?: string;\n /** Items in the FormGroup component */\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the errorWrapper. */\n errorWrapperClassName?: string;\n /** Adds custom classes to the fieldset element. */\n fieldsetClassName?: string;\n /** Sets a tag that describes whether the form group is required or optional */\n formFieldTag?: React.ReactNode;\n /** Adds custom classes to the legend element. */\n legendClassName?: string;\n /** Changes the visuals of the formgroup */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the formgroup */\n size?: keyof typeof FormSize;\n /** Error message */\n error?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets the data-testid attribute for the error-wrapper. */\n errorWrapperTestId?: string;\n /** Unique name for the child input element */\n name?: string;\n /** Unique name for the fieldset */\n fieldsetName?: string;\n /** Sets div instead of fieldset tag */\n htmlMarkup?: FormGroupTags;\n /** Markup for legend if formgroup htmlMarkup is div*/\n legendHtmlMarkup?: TitleTags;\n /** Markup for title */\n titleHtmlMarkup?: TitleTags;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n /** Ref passed to the error message element */\n errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n const {\n ariaLabelledBy,\n className,\n errorTextId: errorTextIdProp,\n fieldsetClassName,\n formFieldTag,\n legendClassName,\n legendId,\n onColor = FormOnColor.onwhite,\n size = FormSize.medium,\n error,\n name,\n htmlMarkup = 'fieldset',\n renderError = true,\n errorWrapperClassName,\n errorWrapperTestId,\n errorMessageRef,\n legendHtmlMarkup = 'h5',\n titleHtmlMarkup = 'h4',\n } = props;\n const radioGroupId = useId();\n const [checkedRadioId, setCheckedRadioId] = useState<string>();\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onDark = onColor === FormOnColor.ondark;\n const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n const titleClasses = classNames({\n [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n });\n\n const CustomTagForLegend = legendHtmlMarkup;\n\n const legendClasses = classNames(\n formGroupStyles['field-set__legend'],\n {\n [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n },\n legendClassName\n );\n\n const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n if (isComponent<FormLayoutProps>(child, FormLayout)) {\n return React.cloneElement(child, {\n size,\n mapHelper: mapFormComponent,\n });\n } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n return React.cloneElement(child, {\n onColor,\n size,\n error,\n renderError: false,\n errorTextId: errorTextId,\n });\n } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n const groupChecked =\n child.props.checked !== undefined ? child.props.checked : checkedRadioId !== undefined ? checkedRadioId === radioId : undefined;\n return React.cloneElement(child, {\n inputId: radioId,\n name: name ?? child.props.name,\n onColor,\n size,\n checked: groupChecked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n setCheckedRadioId(event.target.id);\n if (child.props.onChange) child.props.onChange(event);\n },\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<InputProps>(child, Input)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<TextareaProps>(child, Textarea)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SelectProps>(child, Select)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SliderProps>(child, Slider)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n error: !!error,\n errorTextId: errorTextId,\n });\n }\n return child;\n };\n\n const formGroupContent = (): React.ReactNode => {\n return (\n <div>\n {htmlMarkup === 'div' && (\n <div className={fieldsetClasses}>\n {props.legend && (\n <>\n <CustomTagForLegend id={legendId} className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </CustomTagForLegend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </div>\n )}\n {htmlMarkup === 'fieldset' && (\n <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n {props.legend && (\n <>\n <legend id={legendId} className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </legend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </fieldset>\n )}\n </div>\n );\n };\n\n return (\n <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n {props.title && (\n <Title\n className={titleClasses}\n htmlMarkup={titleHtmlMarkup}\n appearance={'title4'}\n margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n >\n {props.title}\n </Title>\n )}\n <ErrorWrapper\n className={errorWrapperClassName}\n errorText={error}\n testId={errorWrapperTestId}\n errorTextId={errorTextId}\n errorMessageRef={errorMessageRef}\n renderError={renderError}\n >\n {formGroupContent()}\n </ErrorWrapper>\n </div>\n );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
1
+ {"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n ariaLabelledBy?: string;\n /** title for the the fieldset */\n title?: string;\n /** text placed in the legend tag of the fieldset */\n legend?: string;\n /** id for the legend tag */\n legendId?: string;\n /** Items in the FormGroup component */\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the errorWrapper. */\n errorWrapperClassName?: string;\n /** Adds custom classes to the fieldset element. */\n fieldsetClassName?: string;\n /** Sets a tag that describes whether the form group is required or optional */\n formFieldTag?: React.ReactNode;\n /** Adds custom classes to the legend element. */\n legendClassName?: string;\n /** Changes the visuals of the formgroup */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the formgroup */\n size?: keyof typeof FormSize;\n /** Error message */\n error?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets the data-testid attribute for the error-wrapper. */\n errorWrapperTestId?: string;\n /** Unique name for the child input element */\n name?: string;\n /** Unique name for the fieldset */\n fieldsetName?: string;\n /** Sets div instead of fieldset tag */\n htmlMarkup?: FormGroupTags;\n /** Markup for legend if formgroup htmlMarkup is div*/\n legendHtmlMarkup?: TitleTags;\n /** Markup for title */\n titleHtmlMarkup?: TitleTags;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n /** Ref passed to the error message element */\n errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n const {\n ariaLabelledBy,\n className,\n errorTextId: errorTextIdProp,\n fieldsetClassName,\n formFieldTag,\n legendClassName,\n legendId,\n onColor = FormOnColor.onwhite,\n size = FormSize.medium,\n error,\n name,\n htmlMarkup = 'fieldset',\n renderError = true,\n errorWrapperClassName,\n errorWrapperTestId,\n errorMessageRef,\n legendHtmlMarkup = 'h5',\n titleHtmlMarkup = 'h4',\n } = props;\n const radioGroupId = useId();\n const [checkedRadioId, setCheckedRadioId] = useState<string>();\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onDark = onColor === FormOnColor.ondark;\n const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n const titleClasses = classNames({\n [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n });\n\n const CustomTagForLegend = legendHtmlMarkup;\n\n const legendClasses = classNames(\n formGroupStyles['field-set__legend'],\n {\n [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n },\n legendClassName\n );\n\n const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n if (isComponent<FormLayoutProps>(child, FormLayout)) {\n return React.cloneElement(child, {\n size,\n mapHelper: mapFormComponent,\n });\n } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n return React.cloneElement(child, {\n onColor,\n size,\n error,\n renderError: false,\n errorTextId: errorTextId,\n });\n } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n const groupChecked =\n child.props.checked !== undefined ? child.props.checked : checkedRadioId !== undefined ? checkedRadioId === radioId : undefined;\n return React.cloneElement(child, {\n inputId: radioId,\n name: name ?? child.props.name,\n onColor,\n size,\n checked: groupChecked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n setCheckedRadioId(event.target.id);\n if (child.props.onChange) child.props.onChange(event);\n },\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<InputProps>(child, Input)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<TextareaProps>(child, Textarea)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SelectProps>(child, Select)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SliderProps>(child, Slider)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n error: !!error,\n errorTextId: errorTextId,\n });\n }\n return child;\n };\n\n const formGroupContent = (): React.ReactNode => {\n return (\n <div>\n {htmlMarkup === 'div' && (\n <div className={fieldsetClasses}>\n {props.legend && (\n <>\n <CustomTagForLegend id={legendId} className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </CustomTagForLegend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </div>\n )}\n {htmlMarkup === 'fieldset' && (\n <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n {props.legend && (\n <>\n <legend id={legendId} className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </legend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </fieldset>\n )}\n </div>\n );\n };\n\n return (\n <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n {props.title && (\n <Title\n className={titleClasses}\n htmlMarkup={titleHtmlMarkup}\n appearance={'title4'}\n margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n >\n {props.title}\n </Title>\n )}\n <ErrorWrapper\n className={errorWrapperClassName}\n errorText={error}\n testId={errorWrapperTestId}\n errorTextId={errorTextId}\n errorMessageRef={errorMessageRef}\n renderError={renderError}\n >\n {formGroupContent()}\n </ErrorWrapper>\n </div>\n );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"FormLayout.js","names":[],"sources":["../src/components/FormLayout/constants.ts","../src/components/FormLayout/FormLayout.tsx","../src/components/FormLayout/index.ts"],"sourcesContent":["export enum FormLayoutColumns {\n one = 'one',\n two = 'two',\n three = 'three',\n four = 'four',\n five = 'five',\n}\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormLayoutColumns } from './constants';\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport interface FormLayoutProps {\n /** The max number of columns that will exist if space is available */\n maxColumns?: keyof typeof FormLayoutColumns;\n /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n colMinWidth?: number;\n /** Items in the FormLayout component */\n children?: React.ReactNode;\n /** Changes the visuals of the formgroup */\n size?: keyof typeof FormSize;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Function that helps map the form children */\n mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n /** Ref passed to the root div */\n ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {\n const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;\n\n const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n const formLayoutContainerClasses = classNames(\n formGroupStyles['form-layout-container'],\n {\n [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n },\n className\n );\n const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n });\n\n return (\n <div\n data-testid={props.testId}\n data-analyticsid={AnalyticsId.FormLayout}\n style={cssVariable}\n className={formLayoutContainerClasses}\n ref={ref}\n >\n {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n })}\n </div>\n );\n};\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n","import FormLayout from './FormLayout';\nexport { FormLayoutColumns } from './constants';\nexport * from './FormLayout';\nexport default FormLayout;\n"],"mappings":";;;;;;AAAA,IAAY,oBAAL,yBAAA,mBAAA;CACL,kBAAA,SAAA;CACA,kBAAA,SAAA;CACA,kBAAA,WAAA;CACA,kBAAA,UAAA;CACA,kBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;ACsBA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,EAAE,YAAY,UAAU,kBAAkB,KAAK,cAAc,KAAK,MAAM,WAAW,WAAW,QAAQ;CAE5G,MAAM,cAAc,EAAE,mBAAmB,GAAG,YAAY,IAAI;CAC5D,MAAM,6BAA6B,WACjC,gBAAgB,0BAChB,GACG,gBAAgB,kCAAkC,SAAS,SAAS,MACvE,GACA,SACF;CACA,MAAM,yBAAyB,WAAW,gBAAgB,sBAAsB;GAC7E,gBAAgB,4BAA4B,YAAY,kBAAkB;GAC1E,gBAAgB,8BAA8B,YAAY,kBAAkB;GAC5E,gBAAgB,6BAA6B,YAAY,kBAAkB;GAC3E,gBAAgB,6BAA6B,YAAY,kBAAkB;CAC9E,CAAC;CAED,OACE,oBAAC,OAAD;EACE,eAAa,MAAM;EACnB,oBAAkB,YAAY;EAC9B,OAAO;EACP,WAAW;EACN;YAEJ,MAAM,SAAS,IAAI,MAAM,WAAW,OAAwB,UAAkB;GAC7E,OAAO,oBAAC,OAAD;IAAK,WAAW;cAAyB,YAAY,UAAU,OAAO,KAAK,IAAI;GAAW,CAAA;EACnG,CAAC;CACE,CAAA;AAET;AAEA,WAAW,cAAc;;;AC1DzB,IAAA,qBAAe"}
1
+ {"version":3,"file":"FormLayout.js","names":[],"sources":["../src/components/FormLayout/constants.ts","../src/components/FormLayout/FormLayout.tsx","../src/components/FormLayout/index.ts"],"sourcesContent":["export enum FormLayoutColumns {\n one = 'one',\n two = 'two',\n three = 'three',\n four = 'four',\n five = 'five',\n}\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormLayoutColumns } from './constants';\nimport { AnalyticsId, FormSize } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport interface FormLayoutProps {\n /** The max number of columns that will exist if space is available */\n maxColumns?: keyof typeof FormLayoutColumns;\n /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n colMinWidth?: number;\n /** Items in the FormLayout component */\n children?: React.ReactNode;\n /** Changes the visuals of the formgroup */\n size?: keyof typeof FormSize;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Function that helps map the form children */\n mapHelper?: (child: React.ReactNode, index: number) => React.ReactNode;\n /** Ref passed to the root div */\n ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {\n const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, size, className, mapHelper, ref } = props;\n\n const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n const formLayoutContainerClasses = classNames(\n formGroupStyles['form-layout-container'],\n {\n [formGroupStyles['form-layout-container--large']]: size === FormSize.large,\n },\n className\n );\n const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n });\n\n return (\n <div\n data-testid={props.testId}\n data-analyticsid={AnalyticsId.FormLayout}\n style={cssVariable}\n className={formLayoutContainerClasses}\n ref={ref}\n >\n {React.Children.map(props.children, (child: React.ReactNode, index: number) => {\n return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child, index) : child}</div>;\n })}\n </div>\n );\n};\n\nFormLayout.displayName = 'FormLayout';\n\nexport default FormLayout;\n","import FormLayout from './FormLayout';\nexport { FormLayoutColumns } from './constants';\nexport * from './FormLayout';\nexport default FormLayout;\n"],"mappings":";;;;;;AAAA,IAAY,oBAAL,yBAAA,mBAAA;CACL,kBAAA,SAAA;CACA,kBAAA,SAAA;CACA,kBAAA,WAAA;CACA,kBAAA,UAAA;CACA,kBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;ACsBA,IAAa,cAAyC,UAA2B;CAC/E,MAAM,EAAE,YAAY,UAAU,kBAAkB,KAAK,cAAc,KAAK,MAAM,WAAW,WAAW,QAAQ;CAE5G,MAAM,cAAc,EAAE,mBAAmB,GAAG,YAAY,IAAI;CAC5D,MAAM,6BAA6B,WACjC,gBAAgB,0BAChB,GACG,gBAAgB,kCAAkC,SAAS,SAAS,MACvE,GACA,SACF;CACA,MAAM,yBAAyB,WAAW,gBAAgB,sBAAsB;GAC7E,gBAAgB,4BAA4B,YAAY,kBAAkB;GAC1E,gBAAgB,8BAA8B,YAAY,kBAAkB;GAC5E,gBAAgB,6BAA6B,YAAY,kBAAkB;GAC3E,gBAAgB,6BAA6B,YAAY,kBAAkB;CAC9E,CAAC;CAED,OACE,oBAAC,OAAD;EACE,eAAa,MAAM;EACnB,oBAAkB,YAAY;EAC9B,OAAO;EACP,WAAW;EACN;EAEJ,UAAA,MAAM,SAAS,IAAI,MAAM,WAAW,OAAwB,UAAkB;GAC7E,OAAO,oBAAC,OAAD;IAAK,WAAW;IAAyB,UAAA,YAAY,UAAU,OAAO,KAAK,IAAI;GAAW,CAAA;EACnG,CAAC;CACE,CAAA;AAET;AAEA,WAAW,cAAc;;;AC1DzB,IAAA,qBAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"HelpDetails.js","names":[],"sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n /** Sets the text content of the HelpDetails. */\n children: React.ReactNode;\n /** Ref for the element the HelpDetails is placed upon */\n controllerRef?: React.RefObject<HTMLButtonElement | null>;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the component */\n ref?: React.Ref<HTMLDivElement | null>;\n}\nconst HelpDetails: React.FC<HelpDetailsProps> = props => {\n const { children, controllerRef, testId, ref } = props;\n const arrowRef = useRef(null);\n const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n const { refs, context, floatingStyles } = useFloating({\n middleware: [\n offset(arrowYOffsetValue),\n controllerRef && arrow({ element: arrowRef }),\n size({\n apply({ rects }) {\n // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon og halve bredden\n setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);\n\n // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n const { reference, floating } = rects;\n const controllerBottom = reference.y + reference.height;\n const bubbleTop = floating.y;\n const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n setArrowYOffsetValue(distance);\n },\n }),\n ],\n placement: 'bottom',\n whileElementsMounted: autoUpdate,\n elements: {\n reference: controllerRef?.current,\n },\n });\n\n const helpDetailsClasses = classNames(\n styles['help-details'],\n controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n );\n const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n return (\n <div\n className={helpDetailsClasses}\n data-testid={testId}\n ref={ref}\n style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n >\n <div style={floatingStyles} ref={refs.setFloating}>\n {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n <FloatingArrow\n ref={arrowRef}\n context={context}\n fill={'var(--core-color-plum-50)'}\n stroke={'var(--core-color-plum-400)'}\n strokeWidth={1}\n />\n )}\n </div>\n <div className={contentClasses}>{children}</div>\n </div>\n );\n};\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"mappings":";;;;;;AAOA,IAAM,sBAAsB;AAC5B,IAAM,kBAAkB;AAYxB,IAAM,eAA0C,UAAS;CACvD,MAAM,EAAE,UAAU,eAAe,QAAQ,QAAQ;CACjD,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAwB,IAAI;CAC9E,MAAM,CAAC,mBAAmB,wBAAwB,SAAiB;CAEnE,MAAM,EAAE,MAAM,SAAS,mBAAmB,YAAY;EACpD,YAAY;GACV,OAAO,iBAAiB;GACxB,iBAAiB,MAAM,EAAE,SAAS,SAAS,CAAC;GAC5C,KAAK,EACH,MAAM,EAAE,SAAS;IAEf,kBAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,CAAC;IAG/D,MAAM,EAAE,WAAW,aAAa;IAChC,MAAM,mBAAmB,UAAU,IAAI,UAAU;IAEjD,MAAM,WADY,SAAS,IACE,mBAAmB;IAChD,qBAAqB,QAAQ;GAC/B,EACF,CAAC;EACH;EACA,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,eAAe,QAC5B;CACF,CAAC;CAED,MAAM,qBAAqB,WACzB,OAAO,iBACP,gBAAgB,OAAO,0BAA0B,OAAO,2BAC1D;CACA,MAAM,iBAAiB,WAAW,gBAAgB,OAAO,mCAAmC,OAAO,oCAAoC;CAEvI,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACR;EACL,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,oBAAoB,MAAM,KAAA,EAAU;YAJ9F,CAME,oBAAC,OAAD;GAAK,OAAO;GAAgB,KAAK,KAAK;aACnC,iBAAiB,OAAO,sBAAsB,eAC7C,oBAAC,eAAD;IACE,KAAK;IACI;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA;EAEA,CAAA,GACL,oBAAC,OAAD;GAAK,WAAW;GAAiB;EAAc,CAAA,CAC5C;;AAET;AAEA,YAAY,cAAc"}
1
+ {"version":3,"file":"HelpDetails.js","names":[],"sources":["../src/components/HelpDetails/HelpDetails.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport { arrow, FloatingArrow, autoUpdate, useFloating, offset, size } from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nconst BUBBLE_WIDTH_OFFSET = 26;\nconst BUBBLE_Y_OFFSET = 1;\n\nexport interface HelpDetailsProps {\n /** Sets the text content of the HelpDetails. */\n children: React.ReactNode;\n /** Ref for the element the HelpDetails is placed upon */\n controllerRef?: React.RefObject<HTMLButtonElement | null>;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the component */\n ref?: React.Ref<HTMLDivElement | null>;\n}\nconst HelpDetails: React.FC<HelpDetailsProps> = props => {\n const { children, controllerRef, testId, ref } = props;\n const arrowRef = useRef(null);\n const [bubbleMinWidth, setBubbleMinWidth] = React.useState<number | null>(null);\n const [arrowYOffsetValue, setArrowYOffsetValue] = useState<number>();\n\n const { refs, context, floatingStyles } = useFloating({\n middleware: [\n offset(arrowYOffsetValue),\n controllerRef && arrow({ element: arrowRef }),\n size({\n apply({ rects }) {\n // Vi setter minimum bredde på bubble basert på controllerRef sin x posisjon og halve bredden\n setBubbleMinWidth(rects.reference.x + rects.reference.width / 2);\n\n // Vi kalkulerer pilens y-offset basert på avstand mellom controllerRef og bubble\n const { reference, floating } = rects;\n const controllerBottom = reference.y + reference.height;\n const bubbleTop = floating.y;\n const distance = bubbleTop - controllerBottom + BUBBLE_Y_OFFSET;\n setArrowYOffsetValue(distance);\n },\n }),\n ],\n placement: 'bottom',\n whileElementsMounted: autoUpdate,\n elements: {\n reference: controllerRef?.current,\n },\n });\n\n const helpDetailsClasses = classNames(\n styles['help-details'],\n controllerRef ? styles['help-details--inline'] : styles['help-details--standalone']\n );\n const contentClasses = classNames(controllerRef ? styles['help-details__content--inline'] : styles['help-details__content--standalone']);\n\n return (\n <div\n className={helpDetailsClasses}\n data-testid={testId}\n ref={ref}\n style={{ minWidth: bubbleMinWidth ? `${bubbleMinWidth + BUBBLE_WIDTH_OFFSET}px` : undefined }}\n >\n <div style={floatingStyles} ref={refs.setFloating}>\n {controllerRef && typeof arrowYOffsetValue !== 'undefined' && (\n <FloatingArrow\n ref={arrowRef}\n context={context}\n fill={'var(--core-color-plum-50)'}\n stroke={'var(--core-color-plum-400)'}\n strokeWidth={1}\n />\n )}\n </div>\n <div className={contentClasses}>{children}</div>\n </div>\n );\n};\n\nHelpDetails.displayName = 'HelpDetails';\n\nexport default HelpDetails;\n"],"mappings":";;;;;;AAOA,IAAM,sBAAsB;AAC5B,IAAM,kBAAkB;AAYxB,IAAM,eAA0C,UAAS;CACvD,MAAM,EAAE,UAAU,eAAe,QAAQ,QAAQ;CACjD,MAAM,WAAW,OAAO,IAAI;CAC5B,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAwB,IAAI;CAC9E,MAAM,CAAC,mBAAmB,wBAAwB,SAAiB;CAEnE,MAAM,EAAE,MAAM,SAAS,mBAAmB,YAAY;EACpD,YAAY;GACV,OAAO,iBAAiB;GACxB,iBAAiB,MAAM,EAAE,SAAS,SAAS,CAAC;GAC5C,KAAK,EACH,MAAM,EAAE,SAAS;IAEf,kBAAkB,MAAM,UAAU,IAAI,MAAM,UAAU,QAAQ,CAAC;IAG/D,MAAM,EAAE,WAAW,aAAa;IAChC,MAAM,mBAAmB,UAAU,IAAI,UAAU;IAEjD,MAAM,WADY,SAAS,IACE,mBAAmB;IAChD,qBAAqB,QAAQ;GAC/B,EACF,CAAC;EACH;EACA,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,eAAe,QAC5B;CACF,CAAC;CAED,MAAM,qBAAqB,WACzB,OAAO,iBACP,gBAAgB,OAAO,0BAA0B,OAAO,2BAC1D;CACA,MAAM,iBAAiB,WAAW,gBAAgB,OAAO,mCAAmC,OAAO,oCAAoC;CAEvI,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACR;EACL,OAAO,EAAE,UAAU,iBAAiB,GAAG,iBAAiB,oBAAoB,MAAM,KAAA,EAAU;EAJ9F,UAAA,CAME,oBAAC,OAAD;GAAK,OAAO;GAAgB,KAAK,KAAK;GACnC,UAAA,iBAAiB,OAAO,sBAAsB,eAC7C,oBAAC,eAAD;IACE,KAAK;IACI;IACT,MAAM;IACN,QAAQ;IACR,aAAa;GACd,CAAA;EAEA,CAAA,GACL,oBAAC,OAAD;GAAK,WAAW;GAAiB;EAAc,CAAA,CAC5C;;AAET;AAEA,YAAY,cAAc"}