@laerdal/life-react-components 2.1.0-dev.8.full → 2.1.1-dev.15

package/dist/GlobalNavigationBar/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton {\n  label: string;\n  icon?: React.ReactNode;\n  action: () => void;\n  disabled?: boolean;\n  isLoading?: boolean;\n  variant?: 'primary' | 'secondary';\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/GlobalNavigationBar/types.tsx"],"sourcesContent":["import React from 'react';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { IconButtonProps } from '../Button/Iconbutton';\nimport { ProfileButtonProps } from '../ProfileButton/ProfileButton';\nimport { NavLinkProps } from 'react-router-dom';\nimport {ButtonProps} from \"../Button/Button\";\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\nexport interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {\n  label: string;\n  icon?: React.ReactElement;\n}\n\nexport interface MenuButton extends Omit<ButtonProps, 'onClick' | 'children' | 'size'> {\n  label: string;\n  action: () => void;\n\n  tooltip?: TooltipProps;\n}\n\nexport interface MenuGroupFooter {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuGroupHeader {\n  header: string;\n  note?: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface MenuAccountInfo {\n  firstName: string;\n  lastName: string;\n  email: string;\n  link?: MenuHyperLinkProps;\n}\n\nexport interface ProfileMenu {\n  label?: string;\n\n  user: MenuAccountInfo;\n\n  sections: MenuNavigationSection[];\n\n  signOut?: MenuButton;\n}\n\nexport interface MenuIconSubMenuButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'submenu';\n  icon: React.ReactNode;\n  menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuIconButton\n  extends Omit<\n    IconButtonProps,\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'action';\n  icon: React.ReactNode;\n  action: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {\n  type: 'profile';\n  action?: (button?: EventTarget) => boolean | void;\n  placement?: 'left' | 'right';\n}\n\nexport interface MenuSwitcherButton\n  extends Omit<\n    IconButtonProps,\n    | 'id'\n    | 'type'\n    | 'action'\n    | 'shape'\n    | 'variant'\n    | 'hideOnLowWidth'\n    | 'flatEdge'\n    | 'isInMobileMenu'\n    | 'useTransparentBackground'\n    | 'shouldNotInteract'\n    | 'iconColor'\n    | 'unsetIconSize'\n    | 'borderRadius'\n    | 'focusBackgroundColor'\n    | 'children'\n    | 'invertFocus'\n  > {\n  type: 'switcher';\n  placement?: 'left' | 'right';\n  action?: (button?: EventTarget) => boolean | void;\n}\n\nexport type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;\nexport type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;\n\nexport interface MobileNavigationMenuProps {\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n\n  header?: MenuGroupHeader;\n\n  items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup)[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport interface DesktopNavigationMenuProps {\n  buttons?: DesktopMenuButtonTypes[];\n  items: MenuNavigationItemTypeItem[];\n  action?: MenuButton;\n  reverseRightSideOrder?: boolean;\n}\n\n// @ts-ignore\nexport interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSection | MenuNavigationGroup> {\n  label: string;\n  note?: string;\n\n  buttons?: MobileMenuButtonTypes[];\n  header?: MenuGroupHeader;\n\n  items: T[];\n\n  footer?: MenuGroupFooter;\n  action?: MenuButton;\n}\n\nexport type MenuNavigationItem = {\n  icon?: React.ReactNode;\n  to: string;\n  exact?: boolean;\n  disabled?: boolean;\n  external?: boolean;\n  action?: (e: React.MouseEvent) => void;\n  label: string;\n  note?: string;\n  pinned?: boolean;\n} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;\n\nexport interface MenuNavigationSection<T = MenuNavigationItem> {\n  divider?: boolean;\n  pinned?: boolean;\n  label?: string;\n  items: T[];\n}\n\nexport type MenuNavigationItemTypeItem = MenuNavigationItem & {\n  type?: 'item';\n};\n\nexport type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {\n  type: 'group';\n  icon?: React.ReactNode;\n  pinned?: boolean;\n  disabled?: boolean;\n};\n\nexport type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {\n  type: 'section';\n};\n\nexport type MenuNavigationCustomSubMenu = {\n  type: 'custom';\n  label?: string;\n  buttons?: MobileMenuButtonTypes[];\n  custom: () => React.ReactNode;\n};\n"],"mappings":""}

package/dist/Tooltips/TooltipStyles.cjs

@@ -18,7 +18,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var distanceToEdge = function distanceToEdge(size) {
   return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
 };
-var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34em;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: ", ";\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
+var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    ", "\n    height: ", ";\n    max-width: 34em;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: ", ";\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
   return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
 }, function (props) {
   return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
@@ -28,6 +28,8 @@ var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject
   return props.align == 'center' ? 'text-align: center;' : '';
 }, _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
   return props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px';
+}, function (props) {
+  return props.width ? "width: ".concat(props.width, ";") : 'width: max-content;';
 }, function (props) {
   return props.height;
 }, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.tooltip, function (props) {

package/dist/Tooltips/TooltipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n  \n  &:focus{\n    ${focusStyles}\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipStyles.cjs","names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentSStyling","ComponentTextStyle","Regular","COLORS","white","ComponentXSStyling","ComponentMStyling","align","BOXSHADOWS","BOXSHADOW_L2","width","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer","focusStyles"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n  width?: string;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    ${props => props.width ? `width: ${props.width};` : 'width: max-content;'}\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n  \n  &:focus{\n    ${focusStyles}\n  }\n`;\n"],"mappings":"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"}

package/dist/Tooltips/TooltipStyles.d.ts

@@ -5,6 +5,7 @@ export declare const Tooltip: import("styled-components").StyledComponent<"div",
     height?: string | undefined;
     align?: 'start' | 'end' | 'center' | undefined;
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    width?: string | undefined;
 }, never>;
 export declare const TooltipTrigger: (delay?: string) => import("styled-components").FlattenSimpleInterpolation;
 export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {

package/dist/Tooltips/TooltipStyles.js

@@ -8,7 +8,7 @@ import { Z_INDEXES } from '../styles/z-indexes';
 var distanceToEdge = function distanceToEdge(size) {
   return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
 };
-export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34em;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: ", ";\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
+export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    ", "\n    height: ", ";\n    max-width: 34em;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: ", ";\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
   return props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
 }, function (props) {
   return props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '';
@@ -18,6 +18,8 @@ export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTem
   return props.align == 'center' ? 'text-align: center;' : '';
 }, BOXSHADOWS.BOXSHADOW_L2, function (props) {
   return props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px';
+}, function (props) {
+  return props.width ? "width: ".concat(props.width, ";") : 'width: max-content;';
 }, function (props) {
   return props.height;
 }, COLORS.primary_800, Z_INDEXES.tooltip, function (props) {

package/dist/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n  \n  &:focus{\n    ${focusStyles}\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipStyles.js","names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","width","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"sources":["../../src/Tooltips/TooltipStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport {BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n  width?: string;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    ${props => props.width ? `width: ${props.width};` : 'width: max-content;'}\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n  \n  &:focus{\n    ${focusStyles}\n  }\n`;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "2.1.0-dev.8.full",
+  "version": "2.1.1-dev.15",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],