@laerdal/life-react-components 1.4.1-dev.7.full → 1.4.1-dev.8

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

package/dist/umd/Modals/ModalDialog.js

@@ -1,359 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles", "./ModalNote", "../Tooltips", ".."], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"), require("../Tooltips"), require(".."));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote, global.Tooltips, global._);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles, _ModalNote, _Tooltips, _) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.ModalDialog = undefined;
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _ModalContainer2 = _interopRequireDefault(_ModalContainer);
-
-  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
-    };
-  }
-
-  const ModalDialog = exports.ModalDialog = ({
-    size,
-    isModalOpen,
-    closeModalAndClearInput,
-    title,
-    topImage,
-    buttons,
-    leftFooterAction,
-    backButton,
-    closeAction,
-    submitAction,
-    tooltip,
-    children,
-    note,
-    state,
-    icon
-  }) => {
-    const getMinWidth = () => {
-      switch (size) {
-        case _types.Size.Small:
-          return '320px';
-
-        case _types.Size.Large:
-          return '640px';
-
-        case _types.Size.Medium:
-        default:
-          return '480px';
-      }
-    };
-
-    const getMaxWidth = () => {
-      switch (size) {
-        case _types.Size.Small:
-          return '480px';
-
-        case _types.Size.Large:
-          return '720px';
-
-        case _types.Size.Medium:
-        default:
-          return '640px';
-      }
-    };
-
-    const getImageHeight = () => {
-      switch (size) {
-        case _types.Size.Small:
-          return 160;
-
-        case _types.Size.Medium:
-          return 200;
-
-        case _types.Size.Large:
-          return 240;
-
-        default:
-          return 200;
-      }
-    };
-
-    const getMarginBottom = () => {
-      switch (size) {
-        case _types.Size.Small:
-          return '16px';
-
-        case _types.Size.Medium:
-          return '24px';
-
-        case _types.Size.Large:
-          return '32px';
-
-        default:
-          return '24px';
-      }
-    };
-
-    const getPadding = () => {
-      switch (size) {
-        case _types.Size.Small:
-          return '16px 16px 8px';
-
-        case _types.Size.Medium:
-          return '24px 24px 20px';
-
-        case _types.Size.Large:
-          return '32px';
-
-        default:
-          return '24px 24px 16px';
-      }
-    };
-
-    const ModalTitle = (title, size) => {
-      switch (size) {
-        case _types.Size.Small:
-          return /*#__PURE__*/React.createElement(_styles.ComponentM, {
-            textStyle: _styles.ComponentTextStyle.Bold
-          }, title);
-
-        case _types.Size.Medium:
-          return /*#__PURE__*/React.createElement(_styles.ComponentL, {
-            textStyle: _styles.ComponentTextStyle.Bold
-          }, title);
-
-        case _types.Size.Large:
-          return /*#__PURE__*/React.createElement(_styles.ComponentXL, {
-            textStyle: _styles.ComponentTextStyle.Bold
-          }, title);
-
-        default:
-          return /*#__PURE__*/React.createElement(_styles.ComponentL, {
-            textStyle: _styles.ComponentTextStyle.Bold
-          }, title);
-      }
-    };
-
-    const ModalTootip = tooltip => {
-      return /*#__PURE__*/React.createElement(_ModalStyles.ModalHoverModifier, null, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
-        delay: "0s",
-        size: _types.Size.XSmall,
-        align: "center",
-        position: "top",
-        withArrow: false,
-        label: tooltip
-      }, /*#__PURE__*/React.createElement(_Button.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => {}
-      }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
-        size: "24px",
-        color: _styles.COLORS.neutral_600
-      }))));
-    };
-
-    const ModalCloseButton = onClick => {
-      return /*#__PURE__*/React.createElement(_ModalStyles.CloseButtonWrapper, {
-        hasImage: !!topImage,
-        size: size
-      }, /*#__PURE__*/React.createElement(_Button.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => onClick(),
-        borderRadius: 48
-      }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
-        size: "24px",
-        color: _styles.COLORS.black
-      })));
-    };
-
-    const ModalBackButton = () => {
-      if (backButton) {
-        return /*#__PURE__*/React.createElement(_ModalStyles.BackButtonWrapper, {
-          hasImage: !!topImage,
-          size: size
-        }, /*#__PURE__*/React.createElement(_Button.IconButton, {
-          variant: "secondary",
-          shape: "circular",
-          action: () => backButton(),
-          borderRadius: 48
-        }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
-          size: "24px",
-          color: _styles.COLORS.black
-        })));
-      }
-    };
-
-    const getLeftActionIconElement = icon => {
-      return /*#__PURE__*/React.cloneElement(icon, {
-        size: size === _types.Size.Small ? '20px' : size === _types.Size.Large ? '28px' : '24px'
-      });
-    };
-
-    const LeftFooterAction = leftFooterAction => {
-      const {
-        text,
-        actionType,
-        disabled,
-        icon,
-        action
-      } = leftFooterAction;
-
-      switch (actionType) {
-        case 'button':
-          return /*#__PURE__*/React.createElement(_Button.Button, {
-            id: 'left-action-button',
-            type: leftFooterAction?.type,
-            disabled: disabled,
-            loading: leftFooterAction?.loading,
-            icon: icon,
-            size: size,
-            onClick: action,
-            variant: leftFooterAction?.variant ?? 'secondary',
-            style: {
-              order: -1,
-              marginRight: 'auto'
-            }
-          }, text);
-
-        case 'hyperlink':
-          return /*#__PURE__*/React.createElement(_.HyperLink, {
-            id: "left-action-hyperlink",
-            className: "footer-action",
-            href: leftFooterAction.href,
-            disabled: disabled,
-            variant: "default",
-            onClick: e => {
-              if (action) {
-                e.preventDefault();
-                action(e);
-              }
-            }
-          }, icon && getLeftActionIconElement(icon), text);
-
-        case 'note':
-          return /*#__PURE__*/React.createElement("div", {
-            className: "footer-action note"
-          }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
-      }
-    };
-
-    return /*#__PURE__*/React.createElement(_ModalContainer2.default, {
-      showModal: isModalOpen,
-      closeModal: closeModalAndClearInput,
-      minWidth: getMinWidth(),
-      maxWidth: getMaxWidth(),
-      modalHeight: "auto",
-      padding: getPadding()
-    }, /*#__PURE__*/React.createElement(_ModalStyles.Column, null, /*#__PURE__*/React.createElement("form", {
-      onSubmit: submitAction
-    }, topImage && /*#__PURE__*/React.createElement(_ModalStyles.StyledModalHeader, {
-      size: size,
-      height: getImageHeight(),
-      marginBottom: getMarginBottom()
-    }, /*#__PURE__*/React.createElement("img", {
-      src: topImage,
-      alt: "Modal top"
-    }), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActionsWithImage, {
-      hasBackButton: !!backButton
-    }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, /*#__PURE__*/React.createElement(_ModalStyles.FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
-      size: size
-    }, children), note && /*#__PURE__*/React.createElement(_ModalNote.ModalNote, {
-      note: note,
-      state: state,
-      size: size,
-      icon: icon
-    }), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
-      size: size
-    }, leftFooterAction && LeftFooterAction(leftFooterAction), buttons?.map((b, i) => /*#__PURE__*/React.createElement(_Button.Button, {
-      key: b.id || i,
-      id: b.id,
-      disabled: b.disabled,
-      loading: b.loading,
-      size: size,
-      onClick: b.action,
-      type: b.type,
-      variant: b.variant
-    }, b.text))))));
-  };
-
-  ModalDialog.propTypes = {
-    isModalOpen: _propTypes2.default.bool.isRequired,
-    closeModalAndClearInput: _propTypes2.default.any.isRequired,
-    title: _propTypes2.default.string,
-    topImage: _propTypes2.default.any,
-    buttons: _propTypes2.default.array,
-    tooltip: _propTypes2.default.string,
-    backButton: _propTypes2.default.func,
-    closeAction: _propTypes2.default.func.isRequired,
-    submitAction: _propTypes2.default.func.isRequired,
-    note: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.node]),
-    state: _propTypes2.default.string,
-    icon: _propTypes2.default.node
-  };
-  exports.default = ModalDialog;
-});
-//# sourceMappingURL=ModalDialog.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","icon","ModalDialog","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","COLORS","neutral_600","ModalCloseButton","onClick","size","black","ModalBackButton","getLeftActionIconElement","LeftFooterAction","leftFooterAction","action","order","marginRight","e","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  FlexContainer,\n  ModalBody,\n  ModalFooter,\n  ModalHeaderActions,\n  ModalHeaderActionsWithImage,\n  ModalTitleSection,\n  StyledModalHeader,\n  ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string | React.ReactNode;\n  state?: string;\n  icon?: React.ReactNode;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  leftFooterAction,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state,\n  icon,\n}) => {\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalTootip = (tooltip: string) => {\n    return (\n      <ModalHoverModifier>\n        <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n            <Help size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </TooltipWrapper>\n      </ModalHoverModifier>\n    );\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  const getLeftActionIconElement = (icon: ReactNode) => {\n    return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n  };\n\n  const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n    const { text, actionType, disabled, icon, action } = leftFooterAction;\n    switch (actionType) {\n      case 'button':\n        return (\n          <Button\n            id={'left-action-button'}\n            type={(leftFooterAction as LeftFooterButton)?.type}\n            disabled={disabled}\n            loading={(leftFooterAction as LeftFooterButton)?.loading}\n            icon={icon}\n            size={size}\n            onClick={action}\n            variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n            style={{ order: -1, marginRight: 'auto' }}>\n            {text}\n          </Button>\n        );\n      case 'hyperlink':\n        return (\n          <HyperLink\n            id=\"left-action-hyperlink\"\n            className=\"footer-action\"\n            href={(leftFooterAction as LeftFooterHyperlink).href}\n            disabled={disabled}\n            variant=\"default\"\n            onClick={(e) => {\n              if (action) {\n                e.preventDefault();\n                action(e);\n              }\n            }}>\n            {icon && getLeftActionIconElement(icon)}\n            {text}\n          </HyperLink>\n        );\n      case 'note':\n        return (\n          <div className=\"footer-action note\">\n            {icon && getLeftActionIconElement(icon)}\n            <span>{text}</span>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n                {ModalBackButton()}\n                {ModalCloseButton(closeAction)}\n              </ModalHeaderActionsWithImage>\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            <FlexContainer>\n              {!topImage && ModalBackButton()}\n              {title && ModalTitle(title, size)}\n            </FlexContainer>\n            <ModalHeaderActions>\n              {tooltip && ModalTootip(tooltip)}\n              {!topImage && ModalCloseButton(closeAction)}\n            </ModalHeaderActions>\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n          <ModalFooter size={size}>\n            {leftFooterAction && LeftFooterAction(leftFooterAction)}\n            {buttons?.map((b, i) => (\n              <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n                {b.text}\n              </Button>\n            ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}