@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/List/ListRow.js

@@ -0,0 +1,136 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _Tooltips = require("../Tooltips");
+
+var _Dropdown = require("../Dropdown");
+
+var _icons = require("../icons");
+
+var _types = require("../types");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Row = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: none;\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ", ";\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus, _styles.COLORS.neutral_300, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
+
+var ListRow = function ListRow(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+      icon = _ref.icon,
+      mainText = _ref.mainText,
+      secondaryText = _ref.secondaryText,
+      dropdown = _ref.dropdown,
+      note = _ref.note,
+      noteTooltip = _ref.noteTooltip,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      action = _ref.action;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      inAction = _React$useState2[0],
+      setInAction = _React$useState2[1];
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      action && action();
+    }
+  };
+
+  var rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat("".concat(variant, " ")).concat("".concat(size));
+  return /*#__PURE__*/React.createElement(Row, {
+    tabIndex: !!action && !disabled ? 0 : undefined,
+    className: rowClassName,
+    onKeyPress: function onKeyPress(e) {
+      return !disabled && handleKeyPress(e);
+    },
+    onClick: function onClick(e) {
+      !disabled && action && action();
+    },
+    "data-hj-suppress": true
+  }, !!icon && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-icon'
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-content'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-main-text'
+  }, mainText), !!secondaryText && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-secondary-text'
+  }, secondaryText)), !!note && /*#__PURE__*/React.createElement(React.Fragment, null, !!noteTooltip && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-note with-tooltip'
+  }, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+    label: noteTooltip,
+    size: size === _types.Size.Large ? _types.Size.Medium : size === _types.Size.Small ? _types.Size.XSmall : _types.Size.Small,
+    position: 'top',
+    withArrow: true
+  }, note)), !noteTooltip && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-note'
+  }, note)), !!dropdown && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-actions',
+    onMouseEnter: function onMouseEnter() {
+      return setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setInAction(false);
+    }
+  }, /*#__PURE__*/React.createElement(_Dropdown.DropdownButton, _extends({}, dropdown, {
+    disabled: disabled || dropdown.disabled,
+    icon: variant === 'overlay' ? /*#__PURE__*/React.createElement(_icons.SystemIcons.ArrowDropDown, null) : /*#__PURE__*/React.createElement(_icons.SystemIcons.MoreVertical, null)
+  }))));
+};
+
+ListRow.propTypes = {
+  variant: _propTypes.default.oneOf(['normal', 'overlay']),
+  icon: _propTypes.default.node,
+  mainText: _propTypes.default.string.isRequired,
+  secondaryText: _propTypes.default.string,
+  note: _propTypes.default.string,
+  noteTooltip: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  action: _propTypes.default.func
+};
+var _default = ListRow;
+exports.default = _default;
+//# sourceMappingURL=ListRow.js.map

package/dist/js/List/ListRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus","neutral_300","ComponentTextStyle","Regular","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\n\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst Row = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-bottom: 1px solid ${COLORS.neutral_100};\r\n  box-sizing: border-box;\r\n  position: relative;\r\n\r\n  color: ${COLORS.neutral_600};\r\n  background-color: ${COLORS.white};\r\n\r\n\r\n  cursor: default;\r\n\r\n  &.interactive {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.interactive.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &.interactive:hover:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &.interactive:active:not(.in-action):not(.disabled) {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    box-shadow: none;\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.interactive:focus {\r\n    outline: none;\r\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\r\n    z-index: ${Z_INDEXES.focus};\r\n  }\r\n\r\n  &.disabled {\r\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    min-height: 48px;\r\n    padding: 0 8px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 8px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -8px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-height: 56px;\r\n    padding: 0 12px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 12px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-height: 64px;\r\n    padding: 0 16px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 16px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -16px;\r\n    }\r\n  }\r\n\r\n  &.overlay {\r\n    padding: 0 4px;\r\n\r\n    .list-item-actions {\r\n      margin-right: -4px;\r\n    }\r\n  }\r\n\r\n  .list-item-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .list-item-content {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item-main-text {\r\n  }\r\n\r\n  .list-item-secondary-text {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note {\r\n    color: ${COLORS.neutral_600};\r\n    word-break: initial;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note.with-tooltip {\r\n    cursor: pointer;\r\n\r\n    > div {\r\n      text-decoration-line: underline;\r\n      text-decoration-style: dashed;\r\n      text-underline-offset: 1px;\r\n      text-decoration-thickness: 1px;\r\n    }\r\n  }\r\n\r\n  .list-item-actions {\r\n    color: ${COLORS.neutral_600};\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    button div {\r\n      background-color: transparent;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\ntype Props = {\r\n  size?: Size;\r\n  variant?: 'normal' | 'overlay';\r\n  icon?: React.ReactNode;\r\n  mainText: string;\r\n  secondaryText?: string;\r\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n  note?: string;\r\n  noteTooltip?: string;\r\n  disabled?: boolean;\r\n  action?: () => void;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<Props> = ({\r\n                                                   size = Size.Medium,\r\n                                                   variant = 'normal',\r\n                                                   icon,\r\n                                                   mainText,\r\n                                                   secondaryText,\r\n                                                   dropdown,\r\n                                                   note,\r\n                                                   noteTooltip,\r\n                                                   disabled = false,\r\n                                                   action\r\n                                                 }: Props) => {\r\n\r\n  const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n  const handleKeyPress = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      action && action()\r\n    }\r\n  }\r\n\r\n  const rowClassName = (inAction ? 'in-action ' : '')\r\n    .concat(disabled ? 'disabled ' : '')\r\n    .concat(!!action ? 'interactive ' : '')\r\n    .concat('list-item-row ')\r\n    .concat(`${variant} `)\r\n    .concat(`${size}`);\r\n\r\n  return (\r\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\r\n         className={rowClassName}\r\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\r\n         onClick={e => {\r\n           !disabled && action && action();\r\n         }}\r\n         data-hj-suppress>\r\n      {\r\n        !!icon &&\r\n        <div className={'list-item-icon'}>{icon}</div>\r\n      }\r\n      <div className={'list-item-content'}>\r\n        <div className={'list-item-main-text'}>{mainText}</div>\r\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n      </div>\r\n      {\r\n        !!note &&\r\n        <>\r\n          {\r\n            !!noteTooltip &&\r\n            <div className={'list-item-note with-tooltip'}>\r\n              <TooltipWrapper label={noteTooltip}\r\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n                              position={'top'}\r\n                              withArrow={true}>\r\n                {note}\r\n              </TooltipWrapper>\r\n            </div>\r\n          }\r\n          {\r\n            !noteTooltip &&\r\n            <div className={'list-item-note'}>\r\n              {note}\r\n            </div>\r\n          }\r\n        </>\r\n      }\r\n      {\r\n        !!dropdown &&\r\n        <div className={'list-item-actions'}\r\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n             onMouseLeave={() => setInAction(false)}>\r\n          <DropdownButton {...dropdown}\r\n                          disabled={disabled || dropdown.disabled}\r\n                          icon={variant === 'overlay'\r\n                            ? <SystemIcons.ArrowDropDown/>\r\n                            : <SystemIcons.MoreVertical/>}\r\n          />\r\n        </div>\r\n      }\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"file":"ListRow.js"}

package/dist/js/List/ListRowDropdown.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ListRowDropdownOption } from '../types';
+declare type DropdownMenuProps = {
+    options: ListRowDropdownOption[];
+    closeDropdown: any;
+    size: string;
+};
+declare const ListRowDropdown: React.FunctionComponent<DropdownMenuProps>;
+export default ListRowDropdown;

package/dist/js/List/ListRowDropdown.js

@@ -0,0 +1,131 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .isInside {\n    top: 42px;\n  }\n  .isOutside {\n    bottom: 42px;\n  }\n"])));
+
+var DropdownMenuContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  flex-direction: column;\n  background: ", ";\n  font-size: 1em;\n  z-index: 1;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  right: 0;\n  width: max-content;\n  min-width: 260px;\n"])), _styles.COLORS.white);
+
+var Content = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100%;\n  padding: 12px 16px;\n\n  text-align: left;\n  height: inherit;\n\n  ", "\n\n  background-color: ", ";\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\n  &:hover {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &:active {\n    background: ", ";\n    border-radius: 4px;\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_100);
+
+var DropdownValue = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: ", "\n"])), function (props) {
+  return handleDropdownHeight(props.size);
+});
+
+var handleDropdownHeight = function handleDropdownHeight(size) {
+  switch (size) {
+    case 'small':
+      return '48px;';
+
+    case 'medium':
+      return '56px;';
+
+    default:
+      return '64px;';
+  }
+};
+
+var ListRowDropdown = function ListRowDropdown(_ref) {
+  var options = _ref.options,
+      closeDropdown = _ref.closeDropdown,
+      size = _ref.size;
+
+  var _React$useState = React.useState('isInside'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      classname = _React$useState2[0],
+      setClassname = _React$useState2[1];
+
+  var reference = React.useRef(null);
+
+  var clickIsOutside = function clickIsOutside(e) {
+    return reference && (reference === null || reference === void 0 ? void 0 : reference.current) && !(reference !== null && reference !== void 0 && reference.current.contains(e.target));
+  };
+
+  var handleClick = function handleClick(e) {
+    if (e.keyCode) {
+      if (e.keyCode === 27) {
+        closeDropdown();
+      }
+    } else if (clickIsOutside(e)) {
+      closeDropdown();
+    }
+  };
+
+  var isInViewport = function isInViewport() {
+    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    if (!reference.current) return;
+    var top = reference.current.getBoundingClientRect().bottom;
+    var inside = top + offset >= 0 && top - offset <= window.innerHeight;
+
+    if (!inside) {
+      setClassname('isOutside');
+    }
+  };
+
+  React.useEffect(function () {
+    document.addEventListener('mousedown', handleClick, false);
+    document.addEventListener('keydown', handleClick, false);
+    isInViewport();
+    return function () {
+      document.removeEventListener('mousedown', handleClick, false);
+      document.removeEventListener('keydown', handleClick, false);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenuContainer, {
+    ref: reference,
+    className: classname
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(DropdownValue, {
+      size: size
+    }, /*#__PURE__*/React.createElement(Content, {
+      key: option.key,
+      onClick: option.action
+    }, option.label));
+  })));
+};
+
+ListRowDropdown.propTypes = {
+  options: _propTypes.default.array.isRequired,
+  closeDropdown: _propTypes.default.any.isRequired,
+  size: _propTypes.default.string.isRequired
+};
+var _default = ListRowDropdown;
+exports.default = _default;
+//# sourceMappingURL=ListRowDropdown.js.map

package/dist/js/List/ListRowDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["Wrapper","styled","div","DropdownMenuContainer","COLORS","white","Content","button","ComponentTextStyle","Regular","neutral_600","primary_20","primary_100","DropdownValue","props","handleDropdownHeight","size","ListRowDropdown","options","closeDropdown","React","useState","classname","setClassname","reference","useRef","clickIsOutside","e","current","contains","target","handleClick","keyCode","isInViewport","offset","top","getBoundingClientRect","bottom","inside","window","innerHeight","useEffect","document","addEventListener","removeEventListener","map","option","key","action","label"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,mJAAb;;AASA,IAAMC,qBAAqB,GAAGF,0BAAOC,GAAV,iTAGXE,eAAOC,KAHI,CAA3B;;AAaA,IAAMC,OAAO,GAAGL,0BAAOM,MAAV,wZAOT,mCAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CAPS,EASSN,eAAOC,KAThB,EAkBKD,eAAOO,UAlBZ,EAsBKP,eAAOQ,WAtBZ,CAAb;;AA2BA,IAAMC,aAAa,GAAGZ,0BAAOC,GAAV,0FACP,UAAAY,KAAK;AAAA,SAAGC,oBAAoB,CAACD,KAAK,CAACE,IAAP,CAAvB;AAAA,CADE,CAAnB;;AAIA,IAAMD,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,IAAD,EAAiB;AAC5C,UAAOA,IAAP;AAEE,SAAK,OAAL;AAAe,aAAO,OAAP;;AACf,SAAK,QAAL;AAAgB,aAAO,OAAP;;AAChB;AAAU,aAAO,OAAP;AAJZ;AAMD,CAPD;;AAeA,IAAMC,eAA2D,GAAG,SAA9DA,eAA8D,OAAyD;AAAA,MAAtDC,OAAsD,QAAtDA,OAAsD;AAAA,MAA7CC,aAA6C,QAA7CA,aAA6C;AAAA,MAA9BH,IAA8B,QAA9BA,IAA8B;;AAC3H,wBAAkCI,KAAK,CAACC,QAAN,CAAe,UAAf,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AACA,MAAMC,SAAS,GAAGJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAAlB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD;AAAA,WAAYH,SAAS,KAAIA,SAAJ,aAAIA,SAAJ,uBAAIA,SAAS,CAAEI,OAAf,CAAT,IAAmC,EAACJ,SAAD,aAACA,SAAD,eAACA,SAAS,CAAEI,OAAX,CAAmBC,QAAnB,CAA4BF,CAAC,CAACG,MAA9B,CAAD,CAA/C;AAAA,GAAvB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACJ,CAAD,EAAY;AAC9B,QAAIA,CAAC,CAACK,OAAN,EAAe;AACb,UAAIL,CAAC,CAACK,OAAF,KAAc,EAAlB,EAAsB;AACpBb,QAAAA,aAAa;AACd;AACF,KAJD,MAIO,IAAIO,cAAc,CAACC,CAAD,CAAlB,EAAuB;AAC5BR,MAAAA,aAAa;AACd;AACF,GARD;;AAUA,MAAMc,YAAY,GAAG,SAAfA,YAAe,GAAgB;AAAA,QAAfC,MAAe,uEAAN,CAAM;AACnC,QAAI,CAACV,SAAS,CAACI,OAAf,EAAwB;AACxB,QAAMO,GAAG,GAAGX,SAAS,CAACI,OAAV,CAAkBQ,qBAAlB,GAA0CC,MAAtD;AACA,QAAMC,MAAM,GAAGH,GAAG,GAAGD,MAAN,IAAgB,CAAhB,IAAqBC,GAAG,GAAGD,MAAN,IAAgBK,MAAM,CAACC,WAA3D;;AACA,QAAI,CAACF,MAAL,EAAa;AACXf,MAAAA,YAAY,CAAC,WAAD,CAAZ;AACD;AACF,GAPD;;AASAH,EAAAA,KAAK,CAACqB,SAAN,CAAgB,YAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCZ,WAAvC,EAAoD,KAApD;AACAW,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCZ,WAArC,EAAkD,KAAlD;AACAE,IAAAA,YAAY;AACZ,WAAO,YAAM;AACXS,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0Cb,WAA1C,EAAuD,KAAvD;AACAW,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCb,WAAxC,EAAqD,KAArD;AACD,KAHD,CAJoB,CAQpB;AACD,GATD,EASG,EATH;AAWA,sBACE,oBAAC,OAAD,qBACE,oBAAC,qBAAD;AAAuB,IAAA,GAAG,EAAEP,SAA5B;AAAuC,IAAA,SAAS,EAAEF;AAAlD,KACGJ,OAAO,CAAC2B,GAAR,CAAY,UAAAC,MAAM;AAAA,wBACjB,oBAAC,aAAD;AAAe,MAAA,IAAI,EAAE9B;AAArB,oBACE,oBAAC,OAAD;AAAS,MAAA,GAAG,EAAE8B,MAAM,CAACC,GAArB;AAA0B,MAAA,OAAO,EAAED,MAAM,CAACE;AAA1C,OACGF,MAAM,CAACG,KADV,CADF,CADiB;AAAA,GAAlB,CADH,CADF,CADF;AAaD,CAjDD;;;AALE/B,EAAAA,O;AACAC,EAAAA,a;AACAH,EAAAA,I;;eAsDaC,e","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ListRowDropdownOption} from '../types';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst Wrapper = styled.div`\r\n  .isInside {\r\n    top: 42px;\r\n  }\r\n  .isOutside {\r\n    bottom: 42px;\r\n  }\r\n`;\r\n\r\nconst DropdownMenuContainer = styled.div`\r\n  position: absolute;\r\n  flex-direction: column;\r\n  background: ${COLORS.white};\r\n  font-size: 1em;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n  border-radius: 4px;\r\n  right: 0;\r\n  width: max-content;\r\n  min-width: 260px;\r\n`;\r\n\r\nconst Content = styled.button`\r\n  min-width: 100%;\r\n  padding: 12px 16px;\r\n\r\n  text-align: left;\r\n  height: inherit;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n  background-color: ${COLORS.white};\r\n  border-width: 0;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &:hover {\r\n    background: ${COLORS.primary_20};\r\n    border-radius: 4px;\r\n  }\r\n  &:active {\r\n    background: ${COLORS.primary_100};\r\n    border-radius: 4px;\r\n  }\r\n`;\r\n\r\nconst DropdownValue = styled.div<{size:string}>`\r\n  height: ${props=> handleDropdownHeight(props.size)}\r\n`;\r\n\r\nconst handleDropdownHeight = (size:string) => {\r\n  switch(size)\r\n  {\r\n    case 'small' : return '48px;';\r\n    case 'medium' : return '56px;';\r\n    default : return '64px;';\r\n  }\r\n}\r\n\r\ntype DropdownMenuProps = {\r\n  options: ListRowDropdownOption[];\r\n  closeDropdown: any;\r\n  size: string;\r\n};\r\n\r\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown, size }: DropdownMenuProps) => {\r\n  const [classname, setClassname] = React.useState('isInside');\r\n  const reference = React.useRef<HTMLDivElement>(null);\r\n\r\n  const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\r\n\r\n  const handleClick = (e: any) => {\r\n    if (e.keyCode) {\r\n      if (e.keyCode === 27) {\r\n        closeDropdown();\r\n      }\r\n    } else if (clickIsOutside(e)) {\r\n      closeDropdown();\r\n    }\r\n  };\r\n\r\n  const isInViewport = (offset = 0) => {\r\n    if (!reference.current) return;\r\n    const top = reference.current.getBoundingClientRect().bottom;\r\n    const inside = top + offset >= 0 && top - offset <= window.innerHeight;\r\n    if (!inside) {\r\n      setClassname('isOutside');\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    document.addEventListener('mousedown', handleClick, false);\r\n    document.addEventListener('keydown', handleClick, false);\r\n    isInViewport();\r\n    return () => {\r\n      document.removeEventListener('mousedown', handleClick, false);\r\n      document.removeEventListener('keydown', handleClick, false);\r\n    };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <DropdownMenuContainer ref={reference} className={classname}>\r\n        {options.map(option => (\r\n          <DropdownValue size={size}>\r\n            <Content key={option.key} onClick={option.action} >\r\n              {option.label}\r\n            </Content>\r\n          </DropdownValue>\r\n        ))}\r\n      </DropdownMenuContainer>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default ListRowDropdown;\r\n"],"file":"ListRowDropdown.js"}

package/dist/js/List/__tests__/ListRow.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/List/__tests__/ListRow.tests.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _index = require("../index");
+
+var _types = require("../../types");
+
+var _icons = require("../../icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<ListRow />', function () {
+  it('Renders', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, getByText;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.ListRow, {
+              icon: /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Institute, null),
+              mainText: 'Laerdal Medical AS',
+              size: _types.Size.Small,
+              disabled: false
+            })), getByText = _render.getByText;
+            expect(getByText('Laerdal Medical AS')).toBeDefined();
+
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});
+//# sourceMappingURL=ListRow.tests.js.map

package/dist/js/List/__tests__/ListRow.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["describe","it","Size","Small","getByText","expect","toBeDefined"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,QAAQ,CAAC,aAAD,EAAgB,YAAM;AAC5BC,EAAAA,EAAE,CAAC,SAAD,uEAAY;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBACQ,kCAClB,6BAAC,cAAD;AACE,cAAA,IAAI,eAAE,6BAAC,kBAAD,CAAa,SAAb,OADR;AAEE,cAAA,QAAQ,EAAE,oBAFZ;AAGE,cAAA,IAAI,EAAEC,YAAKC,KAHb;AAIE,cAAA,QAAQ,EAAE;AAJZ,cADkB,CADR,EACLC,SADK,WACLA,SADK;AAQZC,YAAAA,MAAM,CAACD,SAAS,CAAC,oBAAD,CAAV,CAAN,CAAwCE,WAAxC;;AARY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAZ,GAAF;AAUD,CAXO,CAAR","sourcesContent":["import React from 'react';\r\nimport {render} from '@testing-library/react';\r\nimport {ListRow} from '../index';\r\nimport {Size} from '../../types';\r\nimport {SystemIcons} from '../../icons';\r\n\r\ndescribe('<ListRow />', () => {\r\n  it('Renders', async () => {\r\n    const {getByText} = render(\r\n      <ListRow\r\n        icon={<SystemIcons.Institute/>}\r\n        mainText={'Laerdal Medical AS'}\r\n        size={Size.Small}\r\n        disabled={false}/>,\r\n    );\r\n    expect(getByText('Laerdal Medical AS')).toBeDefined();\r\n  });\r\n});\r\n"],"file":"ListRow.tests.js"}

package/dist/js/List/index.d.ts

@@ -0,0 +1,2 @@
+import ListRow from './ListRow';
+export { ListRow };

package/dist/js/List/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ListRow", {
+  enumerable: true,
+  get: function get() {
+    return _ListRow.default;
+  }
+});
+
+var _ListRow = _interopRequireDefault(require("./ListRow"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/js/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/List/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["import ListRow from './ListRow';\r\n\r\nexport {ListRow};\r\n"],"file":"index.js"}

package/dist/js/LoadingIndicator/LoadingIndicator.d.ts

@@ -0,0 +1,7 @@
+import { Size } from '../types';
+declare type LoadingIndicatorProps = {
+    size?: Size.Small | Size.Medium;
+    color?: string;
+};
+declare const LoadingIndicator: ({ size, color }: LoadingIndicatorProps) => JSX.Element;
+export default LoadingIndicator;

package/dist/js/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,63 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _types = require("../types");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var LoadingWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n"])));
+
+var LoadingIndicator = function LoadingIndicator(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? _styles.COLORS.primary : _ref$color;
+
+  switch (size) {
+    case _types.Size.Medium:
+      return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingMedium, {
+        color: color
+      }));
+
+    case _types.Size.Small:
+      return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingSmall, {
+        color: color
+      }));
+
+    default:
+      return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(_SystemIcons.LoadingMedium, {
+        color: color
+      }));
+  }
+};
+
+LoadingIndicator.propTypes = {
+  color: _propTypes.default.string
+};
+var _default = LoadingIndicator;
+exports.default = _default;
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/js/LoadingIndicator/LoadingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["LoadingWrapper","styled","div","LoadingIndicator","size","Size","Medium","color","COLORS","primary","Small"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,kcAApB;;AA4BA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2E;AAAA,uBAAxEC,IAAwE;AAAA,MAAxEA,IAAwE,0BAAjEC,YAAKC,MAA4D;AAAA,wBAApDC,KAAoD;AAAA,MAApDA,KAAoD,2BAA5CC,eAAOC,OAAqC;;AAClG,UAAQL,IAAR;AACE,SAAKC,YAAKC,MAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAKF,YAAKK,KAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,yBAAD;AAAc,QAAA,KAAK,EAAEH;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,0BAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAHEA,EAAAA,K;;eA0BaJ,gB","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\r\n\r\nconst LoadingWrapper = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  svg {\r\n    animation-name: spin;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: infinite;\r\n    transform-origin: 50% 50%;\r\n\r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(0deg);\r\n      }\r\n      to {\r\n        transform: rotate(360deg);\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\ntype LoadingIndicatorProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  color?: string;\r\n};\r\n\r\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary }: LoadingIndicatorProps) => {\r\n  switch (size) {\r\n    case Size.Medium:\r\n      return (\r\n        <LoadingWrapper>\r\n          <LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    case Size.Small:\r\n      return (\r\n        <LoadingWrapper>\r\n          <LoadingSmall color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    default:\r\n      return (\r\n        <LoadingWrapper>\r\n          <LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n  }\r\n};\r\n\r\nexport default LoadingIndicator;\r\n"],"file":"LoadingIndicator.js"}

package/dist/js/LoadingIndicator/index.d.ts

@@ -0,0 +1 @@
+export { default as LoadingIndicator } from './LoadingIndicator';

package/dist/js/LoadingIndicator/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoadingIndicator", {
+  enumerable: true,
+  get: function get() {
+    return _LoadingIndicator.default;
+  }
+});
+
+var _LoadingIndicator = _interopRequireDefault(require("./LoadingIndicator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/js/LoadingIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/LoadingIndicator/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as LoadingIndicator } from './LoadingIndicator';\r\n"],"file":"index.js"}

package/dist/js/LoadingPage/GlobalLoadingPage.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface LoaderProps {
+    optionalMessage?: string;
+    includeHeader?: boolean;
+}
+declare const LoadingPage: React.FunctionComponent<LoaderProps>;
+export default LoadingPage;

package/dist/js/LoadingPage/GlobalLoadingPage.js

@@ -0,0 +1,58 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _assets = require("../assets");
+
+var _LoadingIndicator = _interopRequireDefault(require("../LoadingIndicator/LoadingIndicator"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var LoadingMain = _styledComponents.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  background-color: ", ";\n  height: 100%;\n"])), _styles.COLORS.primary_20);
+
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 64px;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n"])), _styles.COLORS.white, _styles.COLORS.neutral_200);
+
+var LogoAndMessage = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  bottom: 36px;\n  left: 50%;\n  transform: translate(-50%);\n  align-items: center;\n\n  span {\n    margin-bottom: 40px;\n    font-weight: normal;\n    width: 320px;\n    text-align: center;\n    \n    ", "\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+
+var LoadingIndicatorContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+
+var LoadingPage = function LoadingPage(_ref) {
+  var optionalMessage = _ref.optionalMessage,
+      includeHeader = _ref.includeHeader;
+  return /*#__PURE__*/React.createElement(LoadingMain, {
+    "data-testid": "TestLoadingMain"
+  }, includeHeader && /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(LoadingIndicatorContainer, null, /*#__PURE__*/React.createElement(_LoadingIndicator.default, null)), /*#__PURE__*/React.createElement(LogoAndMessage, {
+    "data-testid": "TestLoadingLogoAndMessage"
+  }, optionalMessage && /*#__PURE__*/React.createElement("span", null, optionalMessage), /*#__PURE__*/React.createElement(_assets.LaerdalLoadingLogo, null)));
+};
+
+LoadingPage.propTypes = {
+  optionalMessage: _propTypes.default.string,
+  includeHeader: _propTypes.default.bool
+};
+var _default = LoadingPage;
+exports.default = _default;
+//# sourceMappingURL=GlobalLoadingPage.js.map

package/dist/js/LoadingPage/GlobalLoadingPage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/LoadingPage/GlobalLoadingPage.tsx"],"names":["LoadingMain","styled","main","COLORS","primary_20","Header","div","white","neutral_200","LogoAndMessage","ComponentTextStyle","Regular","neutral_600","LoadingIndicatorContainer","LoadingPage","optionalMessage","includeHeader"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,WAAW,GAAGC,0BAAOC,IAAV,6KAIKC,eAAOC,UAJZ,CAAjB;;AAQA,IAAMC,MAAM,GAAGJ,0BAAOK,GAAV,wJAEUH,eAAOI,KAFjB,EAGiBJ,eAAOK,WAHxB,CAAZ;;AAMA,IAAMC,cAAc,GAAGR,0BAAOK,GAAV,qWAed,mCAAkBI,2BAAmBC,OAArC,EAA8CR,eAAOS,WAArD,CAfc,CAApB;;AAmBA,IAAMC,yBAAyB,GAAGZ,0BAAOK,GAAV,gKAA/B;;AAYA,IAAMQ,WAAiD,GAAG,SAApDA,WAAoD,OAAqD;AAAA,MAAlDC,eAAkD,QAAlDA,eAAkD;AAAA,MAAjCC,aAAiC,QAAjCA,aAAiC;AAC7G,sBACE,oBAAC,WAAD;AAAa,mBAAY;AAAzB,KACGA,aAAa,iBAAI,oBAAC,MAAD,OADpB,eAEE,oBAAC,yBAAD,qBACE,oBAAC,yBAAD,OADF,CAFF,eAKE,oBAAC,cAAD;AAAgB,mBAAY;AAA5B,KACGD,eAAe,iBAAI,kCAAOA,eAAP,CADtB,eAEE,oBAAC,0BAAD,OAFF,CALF,CADF;AAYD,CAbD;;;AAJEA,EAAAA,e;AACAC,EAAAA,a;;eAkBaF,W","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {LaerdalLoadingLogo} from '../assets';\r\n\r\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst LoadingMain = styled.main`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  background-color: ${COLORS.primary_20};\r\n  height: 100%;\r\n`;\r\n\r\nconst Header = styled.div<LoaderProps>`\r\n  height: 64px;\r\n  background-color: ${COLORS.white};\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n`;\r\n\r\nconst LogoAndMessage = styled.div`\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  bottom: 36px;\r\n  left: 50%;\r\n  transform: translate(-50%);\r\n  align-items: center;\r\n\r\n  span {\r\n    margin-bottom: 40px;\r\n    font-weight: normal;\r\n    width: 320px;\r\n    text-align: center;\r\n    \r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  }\r\n`;\r\n\r\nconst LoadingIndicatorContainer = styled.div`\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n`;\r\n\r\ninterface LoaderProps {\r\n  optionalMessage?: string;\r\n  includeHeader?: boolean;\r\n}\r\n\r\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\r\n  return (\r\n    <LoadingMain data-testid=\"TestLoadingMain\">\r\n      {includeHeader && <Header />}\r\n      <LoadingIndicatorContainer>\r\n        <LoadingIndicator />\r\n      </LoadingIndicatorContainer>\r\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\r\n        {optionalMessage && <span>{optionalMessage}</span>}\r\n        <LaerdalLoadingLogo />\r\n      </LogoAndMessage>\r\n    </LoadingMain>\r\n  );\r\n};\r\n\r\nexport default LoadingPage;\r\n"],"file":"GlobalLoadingPage.js"}