@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/umd/Modals/Modal.js

@@ -1,131 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../Button", "../icons/systemicons/SystemIcons", "../styles", "./ModalStyles"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./ModalStyles"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.SystemIcons, global.styles, global.ModalStyles);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _SystemIcons, _styles, _ModalStyles) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.ModalCloseButton = undefined;
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (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
-    };
-  }
-
-  /**
-   * Modal styles
-   */
-  const Column = _styledComponents2.default.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-  height: 100%;
-`;
-  const StyledButton = (0, _styledComponents2.default)(_Button.IconButton)`
-  display: flex;
-`;
-
-  const ModalCloseButton = exports.ModalCloseButton = ({
-    onClick
-  }) => {
-    return /*#__PURE__*/React.createElement(StyledButton, {
-      variant: "secondary",
-      shape: "square",
-      action: onClick
-    }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
-      size: "24px",
-      color: _styles.COLORS.black
-    }));
-  };
-
-  const Modal = ({
-    children
-  }) => /*#__PURE__*/React.createElement(Column, null, children);
-
-  Modal.propTypes = {
-    children: _propTypes2.default.any.isRequired
-  };
-
-  Modal.Header = ({
-    children
-  }) => /*#__PURE__*/React.createElement(_ModalStyles.ModalHeader, null, children);
-
-  Modal.Body = ({
-    children
-  }) => /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, null, children);
-
-  Modal.Footer = ({
-    children
-  }) => /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, null, children);
-
-  exports.default = Modal;
-});
-//# sourceMappingURL=Modal.js.map

package/dist/umd/Modals/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Modals/Modal.tsx"],"names":["Column","styled","div","StyledButton","ModalCloseButton","onClick","COLORS","black","children","Modal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACA,QAAMA,MAAM,GAAGC,2BAAOC,GAAI;AAC1B;AACA;AACA;AACA;AAJA,CAAA;AAOA,QAAMC,YAAY,GAAGF,gCAAM,kBAANA,CAAmB;AACxC;AADA,CAAA;;AAIO,QAAMG,gBAAkE,WAAlEA,gBAAkE,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAiB;AACjG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAc,MAAA,OAAO,EAArB,WAAA;AAAkC,MAAA,KAAK,EAAvC,QAAA;AAAiD,MAAA,MAAM,EAAEA;AAAzD,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,MAAA,IAAI,EAAX,MAAA;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC,KAAA,CADF,CADF;AADK,GAAA;;AAYP,QAAME,KAAK,GAAG,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAA5C,QAA4C,CAA5C;;;AAHEA,IAAAA,Q;;;AAKFC,EAAAA,KAAK,CAALA,MAAAA,GAAe,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAA,EAA7CC,QAA6C,CAA7CA;;AAEAA,EAAAA,KAAK,CAALA,IAAAA,GAAa,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,IAAA,EAA3CC,QAA2C,CAA3CA;;AAEAA,EAAAA,KAAK,CAALA,MAAAA,GAAe,CAAC;AAAED,IAAAA;AAAF,GAAD,KAAA,aAA8B,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAA,EAA7CC,QAA6C,CAA7CA;;oBAEA,K","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { IconButton } from '../Button';\r\nimport { Close } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS } from '../styles';\r\nimport { ModalHeader, ModalBody, ModalFooter } from './ModalStyles';\r\n\r\n/**\r\n * Modal styles\r\n */\r\nconst Column = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: stretch;\r\n  height: 100%;\r\n`;\r\n\r\nconst StyledButton = styled(IconButton)`\r\n  display: flex;\r\n`;\r\n\r\nexport const ModalCloseButton: React.FunctionComponent<{ onClick: () => void }> = ({ onClick }) => {\r\n  return (\r\n    <StyledButton variant=\"secondary\" shape=\"square\" action={onClick}>\r\n      <Close size=\"24px\" color={COLORS.black} />\r\n    </StyledButton>\r\n  );\r\n};\r\n\r\ntype ModalProps = {\r\n  children: any;\r\n};\r\n\r\nconst Modal = ({ children }: ModalProps) => <Column>{children}</Column>;\r\n\r\nModal.Header = ({ children }: ModalProps) => <ModalHeader>{children}</ModalHeader>;\r\n\r\nModal.Body = ({ children }: ModalProps) => <ModalBody>{children}</ModalBody>;\r\n\r\nModal.Footer = ({ children }: ModalProps) => <ModalFooter>{children}</ModalFooter>;\r\n\r\nexport default Modal;\r\n"],"file":"Modal.js"}

package/dist/umd/Modals/ModalContainer.js

@@ -1,276 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "react-modal", "../styles", "../styles/z-indexes"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("react-modal"), require("../styles"), require("../styles/z-indexes"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.reactModal, global.styles, global.zIndexes);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _reactModal, _styles, _zIndexes) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _reactModal2 = _interopRequireDefault(_reactModal);
-
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (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 ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-
-      if (enumerableOnly) {
-        symbols = symbols.filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-        });
-      }
-
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
-  const ModalContainerStyles = {
-    content: {
-      top: '50%',
-      left: '50%',
-      right: 'auto',
-      bottom: 'auto',
-      marginRight: '-50%',
-      width: '640px',
-      height: '320px',
-      borderRadius: '8px',
-      boxSizing: 'border-box',
-      margin: 0,
-      overflow: 'auto',
-      boxShadow: _styles.BOXSHADOWS.BOXSHADOW_L3
-    }
-  }; //override modal classes to define the animations
-
-  const modalTransitions = `
-.ReactModal__Overlay {
-  opacity: 0;
-  z-index: ${_zIndexes.Z_INDEXES.backdrop};
-}
-
-.ReactModal__Overlay--after-open {
-  opacity: 1;
-  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);
-}
-
-.ReactModal__Content{
-  z-index: ${_zIndexes.Z_INDEXES.modal};
-  opacity:0;
-  transform: translate(-50%, -50%) scale(1.1, 1.1);
-}
-
-.ReactModal__Content--after-open{
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1.0, 1.0);
-  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);
-}
-
-.ReactModal__Overlay--before-close {
-  opacity: 0;
-  transition: opacity 120ms linear;
-}
-
-.ReactModal__Content--before-close{
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(1.1, 1.1);
-  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);
-}
-
-.ReactModal__Body--open,
-.ReactModal__Html--open {
-  overflow: hidden;
-}
-`;
-
-  class ModalContainer extends React.Component {
-    constructor(...args) {
-      super(...args);
-
-      _defineProperty(this, "GetSize", (modalHeight = 'auto', modalWidth = 'auto') => ({
-        height: modalHeight,
-        width: modalWidth
-      }));
-
-      _defineProperty(this, "GetOverflow", (modalOverflow = 'visible') => modalOverflow);
-    }
-
-    componentDidMount() {
-      if (_reactModal2.default.defaultStyles.overlay) {
-        _reactModal2.default.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
-      } //append style node to override modal transition classes
-
-
-      if (!document.querySelector('[modal-custom-styling="active"]')) {
-        const head = document.head || document.getElementsByTagName('head')[0];
-        const style = document.createElement('style');
-        style.setAttribute('modal-custom-styling', 'active');
-        head.appendChild(style);
-        style.appendChild(document.createTextNode(modalTransitions));
-      }
-    }
-
-    render() {
-      const {
-        id,
-        showModal,
-        closeModal,
-        children,
-        modalHeight,
-        modalWidth,
-        modalOverflow,
-        padding,
-        minWidth = '',
-        maxWidth = ''
-      } = this.props;
-      const sizes = this.GetSize(modalHeight, modalWidth);
-      const {
-        height,
-        width
-      } = sizes;
-      const overflow = this.GetOverflow(modalOverflow);
-      const stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
-        height,
-        width,
-        padding,
-        overflow,
-        minWidth,
-        maxWidth
-      });
-      const styles = {
-        content: stylesConfiguration
-      };
-      return /*#__PURE__*/React.createElement(_reactModal2.default, {
-        id: id,
-        isOpen: showModal,
-        closeTimeoutMS: 120,
-        onRequestClose: () => closeModal(),
-        style: styles,
-        appElement: document.getElementById('root') || ''
-      }, children);
-    }
-
-  }
-
-  _defineProperty(ModalContainer, "propTypes", {
-    id: _propTypes2.default.string,
-    showModal: _propTypes2.default.bool.isRequired,
-    closeModal: _propTypes2.default.func.isRequired,
-    children: _propTypes2.default.any.isRequired,
-    modalHeight: _propTypes2.default.any,
-    modalWidth: _propTypes2.default.any,
-    modalOverflow: _propTypes2.default.string,
-    padding: _propTypes2.default.string,
-    minWidth: _propTypes2.default.string,
-    maxWidth: _propTypes2.default.string
-  });
-
-  exports.default = ModalContainer;
-});
-//# sourceMappingURL=ModalContainer.js.map

package/dist/umd/Modals/ModalContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport { BOXSHADOWS } from '../styles';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\nconst ModalContainerStyles = {\r\n  content: {\r\n    top: '50%',\r\n    left: '50%',\r\n    right: 'auto',\r\n    bottom: 'auto',\r\n    marginRight: '-50%',\r\n    width: '640px',\r\n    height: '320px',\r\n    borderRadius: '8px',\r\n    boxSizing: 'border-box' as any,\r\n    margin: 0,\r\n    overflow: 'auto',\r\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n  },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n.ReactModal__Overlay {\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n  opacity: 1;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n  z-index: ${Z_INDEXES.modal};\r\n  opacity:0;\r\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n  opacity: 1;\r\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\r\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n  opacity: 0;\r\n  transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n  opacity: 0;\r\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\r\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n\r\n.ReactModal__Body--open,\r\n.ReactModal__Html--open {\r\n  overflow: hidden;\r\n}\r\n`;\r\n\r\ntype ModalContainerProps = {\r\n  id?: string;\r\n  showModal: boolean;\r\n  closeModal: () => void;\r\n  children: any;\r\n  modalHeight?: any;\r\n  modalWidth?: any;\r\n  modalOverflow?: string;\r\n  padding?: string;\r\n  minWidth?: string;\r\n  maxWidth?: string;\r\n};\r\n\r\ntype ModalContainerState = {};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n  componentDidMount() {\r\n    if (ReactModal.defaultStyles.overlay) {\r\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n    }\r\n\r\n    //append style node to override modal transition classes\r\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n      const head = document.head || document.getElementsByTagName('head')[0];\r\n      const style = document.createElement('style');\r\n      style.setAttribute('modal-custom-styling', 'active');\r\n      head.appendChild(style);\r\n      style.appendChild(document.createTextNode(modalTransitions));\r\n    }\r\n  }\r\n\r\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\r\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\r\n  render() {\r\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\r\n    const sizes = this.GetSize(modalHeight, modalWidth);\r\n    const { height, width } = sizes;\r\n    const overflow = this.GetOverflow(modalOverflow);\r\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\r\n    const styles = { content: stylesConfiguration };\r\n\r\n    return (\r\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\r\n        {children}\r\n      </ReactModal>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"file":"ModalContainer.js"}